详解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 选择文件夹对话框(web)
Jul 07 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
详解Puppeteer 入门教程
May 09 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 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&amp;&amp;mysql)三
2006/10/09 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
js登录弹出层特效
2014/03/07 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python的re模块使用方法详解
2019/07/26 Python
python双向链表原理与实现方法详解
2019/12/03 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
个人简历中的自我评价怎么写
2014/01/26 职场文书
酒店员工检讨书
2014/02/18 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
什么是SOLID
2022/03/24 Javascript