详解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 相关文章推荐
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
原生js实现下拉选项卡
Nov 27 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
angular2使用简单介绍
2016/03/01 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
使用tensorflow实现线性svm
2018/09/07 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis