详解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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
jquery remove方法应用详解
Nov 22 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
什么是python的自省
2020/06/21 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
类和结构的区别
2012/08/15 面试题
文明教师事迹材料
2014/01/16 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
化学教育专业自荐信
2014/07/04 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
无工作证明怎么写
2015/06/15 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
java泛型通配符详解
2021/07/25 Java/Android
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python