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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
python pygame模块编写飞机大战
2018/11/20 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Django和Flask框架优缺点对比
2019/10/24 Python
在python中做正态性检验示例
2019/12/09 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
电话客服工作职责
2014/07/27 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
春季运动会开幕词
2015/01/28 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
加薪申请报告范本
2015/05/15 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js