详解Webpack DLL用法以及功能


Posted in Javascript onJuly 11, 2017

在使用webpack过程中,本人也发现发现构建速度非常慢,Webpack性能优化的方式有很多种,本文介绍了dll,dll是一种最简单粗暴并且极其有效的优化方式。

前言

在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 reactlodash,我们希望能和自己的代码分离开,Webpack 社区有两种方案

  1. CommonsChunkPlugin
  2. DLLPlugin

对于 CommonsChunkPlugin,webpack 每次打包实际还是需要去处理这些第三方库,只是打包完之后,能把第三方库和我们自己的代码分开。而DLLPlugin 则是能把第三方代码完全分离开,即每次只打包项目自身的代码。

用法

要使用 DLLPlugin,需要额外新建一个配置文件。所以对于用这种方式打包的项目,一般会有下面两个配置文件

  1. webpack.config.js
  2. webpack.dll.config.js

先来看下 webpack.dll.config.js

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')

module.exports = {
 entry: {
  vendors: ['react', 'lodash']
 },

 output: {
  filename: '[name].dll.js',
  path: 'dist/',
  library
 },

 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, 'dist/[name]-manifest.json'),
   // This must match the output.library option above
   name: library
  }),
 ],
}

再改下 webpack.config.js 文件

const webpack = require('webpack')

module.exports = {
 entry: {
  app: './src/index'
 },
 output: {
  filename: 'app.bundle.js',
  path: 'dist/',
 },
 plugins: [
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('./dist/vendors-manifest.json')
  })
 ]
}

manifest: require('./dist/vendors-manifest.json') 这里的路径要和 webpack.dll.config.js 里面的对应。

然后运行

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

然后你的 html 文件像下面这样引用

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

DLL Link Plugin

上面的用法也存在一些不方便的地方,比如在 webpack.config.js 中要明确指出对应的 manifest.json 文件。还有当 DLL 需要更新的时候,比如 react 升级了,或者加入新的第三方库,都需要手动像下面这样编译一次。

$ webpack --config webpack.dll.config.js

因为上面这些问题,所以基于官方的 DllReferencePlugin,我写了一个打包的插件,Dll Link Plugin。

使用这个插件,只需要对 webpack.config.js 作下小小的改动

const webpack = require('webpack')
const DllLinkPlugin = require('dll-link-webpack-plugin')

module.exports = {
 // ...
 plugins: [
  new DllLinkPlugin({
   config: require('webpack.dll.config.js')
  })
 ]
}

直接替换掉 DllReferencePlugin,然后传入对应的 DLL 配置文件就可以了。每次打包的时候,只需要运行

$ webpack --config webpack.config.js

上面的命令便会自动生成对应的 vendors 文件,需要更新的时候,也会自动更新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
jquery常用操作小结
Jul 21 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 #Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 #Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 #Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 #Javascript
JS自定义滚动条效果简单实现代码
Oct 27 #Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
微信小程序分页加载的实例代码
Jul 11 #Javascript
You might like
php 短链接算法收集与分析
2011/12/30 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
js文字横向滚动特效
2015/11/11 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
基本DOM节点操作
2017/01/17 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Django框架自定义session处理操作示例
2019/05/27 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
企业办公室岗位职责
2014/03/12 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
读书笔记格式
2015/07/02 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
创业计划书之服装
2019/10/07 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python