Webpack性能优化 DLL 用法详解


Posted in Javascript onAugust 10, 2017

前言

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

  • CommonsChunkPlugin
  • DLLPlugin

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

用法

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

  • webpack.config.js
  • 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 相关文章推荐
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
详解React Native网络请求fetch简单封装
Aug 10 #Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 #Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
express框架实现基于Websocket建立的简易聊天室
Aug 10 #Javascript
bootstrap table服务端实现分页效果
Aug 10 #Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 #Javascript
You might like
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
浅析PHP Socket技术
2013/08/02 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
JS 判断代码全收集
2009/04/28 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python入门之modf()方法的使用
2015/05/15 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
财务助理岗位职责
2013/11/10 职场文书
领导的自我鉴定
2013/12/28 职场文书
自荐信写法介绍
2014/01/25 职场文书
产假请假条
2014/04/10 职场文书
培训科主任岗位职责
2014/08/08 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书