详解Webpack DLL用法以及功能


Posted in Javascript onJuly 11, 2017

在使用webpack过程中,本人也发现发现构建速度非常慢,Webpack性能优化的方式有很多种,本文介绍了dll,dll是一种最简单粗暴并且极其有效的优化方式。

前言

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

  1. CommonsChunkPlugin
  2. DLLPlugin

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

用法

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

  1. webpack.config.js
  2. 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 匿名函数及其代码模式原理
Mar 19 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
Vuex简单入门
Apr 19 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 #Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 #Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 #Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 #Javascript
JS自定义滚动条效果简单实现代码
Oct 27 #Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
微信小程序分页加载的实例代码
Jul 11 #Javascript
You might like
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Python贪心算法实例小结
2018/04/22 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python实现微信机器人的方法
2019/09/06 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
公司节能减排倡议书
2014/05/14 职场文书
单位委托书格式范本
2014/09/29 职场文书
教育教学工作反思
2016/02/24 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Python find()、rfind()方法及作用
2022/12/24 Python