详解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 相关文章推荐
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
node中使用shell脚本的方法步骤
Mar 23 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
一个SQL管理员的web接口
2006/10/09 PHP
PHP面向对象分析设计的经验原则
2008/09/20 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Python中不同进制的语法及转换方法分析
2016/07/27 Python
20招让你的Python飞起来!
2016/09/27 Python
python 输出所有大小写字母的方法
2019/01/02 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python中无限循环需要什么条件
2020/05/27 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
MySQL面试题目集锦
2016/04/14 面试题
会计自我鉴定范文
2013/10/06 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
就业意向书
2014/07/29 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
2015年财务部工作总结
2015/04/10 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
污水处理保证书
2015/05/09 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记