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 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
vue移动端的左右滑动事件详解
Jun 17 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
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
python中的全局变量用法分析
2015/06/09 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python super的使用方法及实例详解
2019/09/25 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
工程测量与监理专业应届生求职信
2013/11/27 职场文书
银行实习生的自我评价
2014/01/13 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
支教个人总结
2015/03/04 职场文书