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 相关文章推荐
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 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
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python的Django框架中的Context使用
2015/07/15 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
采购主管工作职责
2013/12/12 职场文书
光盘行动倡议书
2014/02/02 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python