详解webpack编译速度提升之DllPlugin


Posted in Javascript onFebruary 05, 2019

一、前言

The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance.

DllPlugin 结合 DllRefrencePlugin 插件的运用,对将要产出的bundle文件进行拆解打包,可以很彻底地加快webpack的打包速度,从而在开发过程中极大地缩减构建时间。

二、构建效果

结论先行: 使用 DllPluginDllRefrencePlugin 进行构建,可以缩减50%~70%的构建时间。

参考Demo: dllplugin-demo

2.1 使用DllPlugin前的构建速度

详解webpack编译速度提升之DllPlugin 

入口文件 main.js 引入了一个 jQuery

文件,图示打包耗时2.3s。

2.2 使用DllPlugin后的构建速度

详解webpack编译速度提升之DllPlugin 

使用插件后,打包耗时0.6s,单次对比,缩减时长达到73%! 2.3 如何验证DLLPlugin已经生效

对比上面两张图打包的模块列表,图二有一行不一样的输出:

[0] delegated ./src/components/jquery.js from dll-reference vendor_57c12dcd8d9774596525 42 bytes {0} [built]

这说明,此次的打包过程,没有重新打包 jQuery 模块,而是直接从 vendor_57c12dcd8d9774596525 中代理了。

三、Get Started

DllPlugin作用示意图:

详解webpack编译速度提升之DllPlugin 

3.1 配置webpack.dll.config.js打包静态公共资源

3.1.1 定义webpack.dll.config.js

为了减小篇幅,只帖关键配置内容,详细访问 dllplugin-demo :

// webpack.dll.config.js
module.exports = {
  entry: {
    // 定义程序中打包公共文件的入口文件vendor.js
    vendor: [path.resolve(src, 'js', 'vendor.js')],
  },
  
  plugins: [
    new webpack.DllPlugin({
      // manifest缓存文件的请求上下文(默认为webpack执行环境上下文)
      context: process.cwd(),
      
      // manifest.json文件的输出位置
      path: path.join(src, 'js', 'dll', '[name]-manifest.json'),
      
      // 定义打包的公共vendor文件对外暴露的函数名
      name: '[name]_[hash]'
    })
  ]
}

3.1.2 声明静态公共资源

在配置好 webpack.dll.config.js 文件之后,在 vendor.js 中声明项目程序中所引用的静态公共资源。

// vendor.js
// 引入自定义在项目目录中的公共资源(可以在配置中声明alias映射关系)
import 'jquery';

// or 引入npm包资源
// import 'Vue';

3.1.3 打包静态公共资源

// cross-env模块需要另外安装
cross-env NODE_ENV=production webpack --config webpack.dll.config.js --colors --display-modules

根据 webpack.dll.config.js ,会在指定位置生成 vendor.dll.js 文件。

3.2 配置webpack.config.js打包入口文件

生成静态公共资源 vendor.dll.js 之后,下一步就要在入口文件中关联引用,这项工作则是由 DllRefrencePlugin 完成的。

3.2.1 在webpack.config.js中关联引用

// webpack.config.js
module.exports = {
  entry: {
    // 项目入口文件
    'app':path.resolve(src, 'js', 'main.js')
  },
  plugins: [
    // dllPlugin关联配置
    new webpack.DllReferencePlugin({
      // 跟dll.config里面DllPlugin的context一致
      context: process.cwd(), 
      
      // dll过程生成的manifest文件
      manifest: require(path.join(src, 'js', "dll", "vendor-manifest.json"))
    })
  ]
}

3.2.2 项目入口文件中引用静态公共资源

// main.js
// 引入的公共模块如果在vendor中有被引用过,那么编译的时候直接使用静态文件vendor.dll.js
import $ from 'jquery';
console.log($)

// import Vue from "Vue";
// console.log(Vue)

引入方式没有什么不同的,跟平时正常引入即可。

3.2.3 项目模板中引用公共静态资源

最后一步,在模板中注入 vendor.dll.js

<!-- index.html -->
<script type="text/javascript" src="/src/js/dll/vendor.dll.js"></script>

如此,在接下来的本地开发(dev过程)和线上构建过程,将不再重复静态公共资源的构建,极大地缩减我们的构建时间。

结语

以上为webpack(Version 4)使用过程中的小小总结,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 #Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 #Javascript
小程序页面动态配置实现方法
Feb 05 #Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 #Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 #Javascript
vue实现的树形结构加多选框示例
Feb 02 #Javascript
javascript中floor使用方法总结
Feb 02 #Javascript
You might like
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php删除指定目录的方法
2015/04/03 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python itertools.product方法代码实例
2020/03/27 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
说明书格式及范文
2014/05/07 职场文书
家长会欢迎标语
2014/06/24 职场文书
股权转让协议书
2014/12/07 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL