Webpack的dll功能使用


Posted in Javascript onJune 28, 2018

最近使用Webpack遇到了一个坑。

我们构建前端项目的时候,往往希望第三方库(vendors)和自己写的代码可以分开打包,因为第三方库往往不需要经常打包更新。对此Webpack的文档建议用CommonsChunkPlugin来单独打包第三方库。

entry: {
 vendor: ["jquery", "other-lib"],
 app: "./entry"
}
new CommonsChunkPlugin({
 name: "vendor",

 // filename: "vendor.js"
 // (Give the chunk a different name)

 minChunks: Infinity,
 // (with more entries, this ensures that no other module
 // goes into the vendor chunk)
})

通常为了对抗缓存,我们会给售出文件的文件名中加入hash的后缀——但是——我们编辑了app部分的代码后,重新打包,发现vendor的hash也变化了!

Webpack的dll功能使用

这么一来,意味着每次发布版本的时候,vendor代码都要刷新,即使我并没有修改其中的代码。这样并不符合我们分开打包的初衷。

带着问题我浏览了Github上的讨论,发现了一个神器:dll。

Dll是Webpack最近新加的功能,我在网上并没有找到什么中文的介绍,所以在这里我就简单介绍一下。

Dll这个概念应该是借鉴了Windows系统的dll。一个dll包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的app引用的。

打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。

这么一来有几个好处:

  1. Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。
  2. App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。
  3. 假设你有多个项目,使用了相同的一些依赖库,它们就可以共用一个dll。

如何使用呢?

首先要先建立一个dll的配置文件,entry只包含第三方库:

const webpack = require('webpack');

const vendors = [
 'antd',
 'isomorphic-fetch',
 'react',
 'react-dom',
 'react-redux',
 'react-router',
 'redux',
 'redux-promise-middleware',
 'redux-thunk',
 'superagent',
];

module.exports = {
 output: {
  path: 'build',
  filename: '[name].[chunkhash].js',
  library: '[name]_[chunkhash]',
 },
 entry: {
  vendor: vendors,
 },
 plugins: [
  new webpack.DllPlugin({
   path: 'manifest.json',
   name: '[name]_[chunkhash]',
   context: __dirname,
  }),
 ],
};

webpack.DllPlugin的选项中,path是manifest文件的输出路径;name是dll暴露的对象名,要跟output.library保持一致;context是解析包路径的上下文,这个要跟接下来配置的dll user一致。

运行Webpack,会输出两个文件一个是打包好的vendor.js,一个就是manifest.json,长这样:

{
 "name": "vendor_ac51ba426d4f259b8b18",
 "content": {
  "./node_modules/antd/dist/antd.js": 1,
  "./node_modules/react/react.js": 2,
  "./node_modules/react/lib/React.js": 3,
  "./node_modules/react/node_modules/object-assign/index.js": 4,
  "./node_modules/react/lib/ReactChildren.js": 5,
  "./node_modules/react/lib/PooledClass.js": 6,
  "./node_modules/react/lib/reactProdInvariant.js": 7,
  "./node_modules/fbjs/lib/invariant.js": 8,
  "./node_modules/react/lib/ReactElement.js": 9,
  
  ............

Webpack将每个库都进行了编号索引,之后的dll user可以读取这个文件,直接用id来引用。

Dll user的配置:

const webpack = require('webpack');

module.exports = {
 output: {
  path: 'build',
  filename: '[name].[chunkhash].js',
 },
 entry: {
  app: './src/index.js',
 },
 plugins: [
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('./manifest.json'),
  }),
 ],
};

DllReferencePlugin的选项中,context需要跟之前保持一致,这个用来指导Webpack匹配manifest中库的路径;manifest用来引入刚才输出的manifest文件。

运行Webpack之后,结果如下:

Webpack的dll功能使用

对比一下不做分离的情况下打包的结果:

Webpack的dll功能使用

速度快了,文件也小了。

平时开发的时候,修改代码后重新编译的速度会大大减少,节省时间。

如果有多个项目,使用相同的一套库,你可以在打包的时候引用相同的manifest文件,这样就可以在项目之间共享了。

参考:

https://webpack.github.io/docs/list-of-plugins.html#dllplugin

https://github.com/webpack/webpack/tree/master/examples/dll

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

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
Vue表单实例代码
Sep 05 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 #Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 #Javascript
详解ES6中的三种异步解决方案
Jun 28 #Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 #Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 #Javascript
vue如何引入sass全局变量
Jun 28 #Javascript
小程序实现带年月选取效果的日历
Jun 27 #Javascript
You might like
浅析js中取绝对值的2种方法
2013/07/09 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
2015/11/17 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python实现各进制转换的总结大全
2017/06/18 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
劳资专员岗位职责
2013/12/27 职场文书
小学国庆节活动方案
2014/02/11 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
患者身份识别制度
2015/08/06 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android