详解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图片轮换效果的函数
Sep 28 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
详细聊聊vue中组件的props属性
Nov 02 Vue.js
基于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生成excel列序号代码实例
2013/12/24 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python求导数的方法
2015/05/09 Python
python验证码识别的示例代码
2017/09/21 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
《乡下孩子》教学反思
2014/04/17 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
Python os和os.path模块详情
2022/04/02 Python