详解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 相关文章推荐
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
javascript计时器详解
Feb 28 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
vue实现路由切换改变title功能
May 28 Javascript
详解Vite的新体验
Feb 22 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中大括号作用介绍
2012/03/22 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python 解析xml文件的示例
2020/09/29 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
党员个人剖析材料2014
2014/10/08 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
个人向公司借款协议书
2016/03/19 职场文书
创业计划书之家教托管
2019/09/25 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server