详解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+XML 操作
Sep 20 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
Nuxt页面级缓存的实现
Mar 09 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
基于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
ftp类(myftp.php)
2006/10/09 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
销售心得体会
2014/01/02 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
2014年清明节寄语
2014/04/03 职场文书
小学教师评语大全
2014/04/23 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
接收函
2019/04/22 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL