详解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 设计模式 富有表现力的Javascript(一)
May 26 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
JS实现div居中示例
Apr 17 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
webpack独立打包和缓存处理详解
Apr 03 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
ftp类(example.php)
2006/10/09 PHP
php基础知识:控制结构
2006/12/13 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Python常用类型转换实现代码实例
2020/07/28 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
外贸英语专业求职信范文
2013/12/25 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫