博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack编译速度提升之DllPlugin
阅读量:5844 次
发布时间:2019-06-18

本文共 2546 字,大约阅读时间需要 8 分钟。

一、前言

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:

2.1 使用DllPlugin前的构建速度

入口文件
main.js引入了一个
jQuery文件,图示打包耗时2.3s。

2.2 使用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作用示意图:

3.1 配置webpack.dll.config.js打包静态公共资源

3.1.1 定义webpack.dll.config.js

为了减小篇幅,只帖关键配置内容,详细访问:

// webpack.dll.config.jsmodule.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.jsmodule.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.jsimport $ from 'jquery';console.log($)// import Vue from "Vue";// console.log(Vue)复制代码

引入方式没有什么不同的,跟平时正常引入即可。

3.2.3 项目模板中引用公共静态资源

最后一步,在模板中注入vendor.dll.js

复制代码

如此,在接下来的本地开发(dev过程)和线上构建过程,将不再重复静态公共资源的构建,极大地缩减我们的构建时间。

结语

以上为webpack(Version 4)使用过程中的小小总结,欢迎刊误或提供优化建议~

参考:

转载地址:http://qiqcx.baihongyu.com/

你可能感兴趣的文章
第一篇文章
查看>>
Node.js 事件循环
查看>>
Hibernate type 与java 和 数据库类型对应
查看>>
Python对文件的操作(转)
查看>>
Virtualbox安装增强工具失败
查看>>
Caffe cuDNN
查看>>
学习笔记 - MarkDown 语法
查看>>
一个获取a标签传值的函数
查看>>
HR面 - 十大经典提问
查看>>
android listview 分析,Android中ListView用法实例分析
查看>>
android xml 加载动画,使用css实现android系统的loading加载动画
查看>>
android实现本地图片上传功能,H5调用本地相册/相机上传图片
查看>>
Android识别游戏的方法,Android版微信跳一跳小游戏利用技术手段达到高分的操作方法...
查看>>
android 发短信 博客,Android打电话&发短信
查看>>
linux date 上一个月,每天学一个 Linux 命令(50):date
查看>>
android 程序运行不了,Android。如何在系统要杀死它之后让应用程序继续运行。或者如何不让系统杀死它呢...
查看>>
微博鸿蒙系统,如何看待华为P50未出,却又迎来华... - @柏铭007 的微博精选 - 微博国际站...
查看>>
华为鸿蒙os路由器,运行鸿蒙 OS!华为子母路由 H6 发布:再也不怕没 WiFi 了?
查看>>
android textview布局,如何在Android中的布局中定位TextView?
查看>>
android设置主题动态背景,终于!微信也能设置主题了,超多半透明动态壁纸随意切换...
查看>>