webpack性能优化DLL才硬核

最近学习 webpack&＃xff0c;越发觉得这家伙学习成本真大&＃xff0c;代码量也非常多&＃xff0c;这还有非常多的第三方代码支持下&＃xff0c;webpack 的生态才能运行下去。为长久考虑&＃xff0c;这阶段我尽量去学习 webpack 「最本质的东西」&＃xff0c;不是仅仅学习「如何使用」&＃xff0c;而是「如何实现」&＃xff0c;这样会起到「事半功倍」的效果。

如果你的项目代码量很大&＃xff0c;这家伙的构建速度会非常慢&＃xff0c;不得不进行性能优化。性能优化的核心是「能缓存就缓存&＃xff0c;多线程加持&＃xff0c;编译越少的文件越好&＃xff0c;使用性能好的机器」。

今天的主要内容是学习 DDL&＃xff08;Dynamic Link Library&＃xff09;&＃xff0c;动态链接库&＃xff0c;这种技术对移动端来说基本上是小儿科&＃xff0c;其核心思想是「把代码变成另外一种形态&＃xff0c;可直接拿来使用」。对于前端来说&＃xff0c;动态库适合那些经常不会修改的代码库&＃xff0c;比如我们使用的第三方库可以先通过 webpack 打包成动态库&＃xff0c;以后就不用打包了&＃xff0c;直接拿来使用就行。

我举个例子&＃xff0c;这个过程就像我们生产苹果手机一样&＃xff0c;各个现成的零件就像动态库一样&＃xff0c;他们是提前生产出来&＃xff0c;最终把这些动态库组装到一起&＃xff0c;就组成了一部手机。

下面我们实现一个项目&＃xff0c;项目里使用了 vue 和 jquery&＃xff0c;他俩属于那种「千年不变」的代码。我新建了一个项目&＃xff0c;结构如下&＃xff1a;

objUtils.js 中使用了 jquery&＃xff1b;

home 是使用 vue 实现的一个页面&＃xff1b;

webpack 本身内置了 DLL&＃xff0c;通过下面两个插件来实现动态库&＃xff1a;

1、DLLPlugin - 动态库的生产者

用于打包单独的动态库文件&＃xff0c;也就是它能够把某些文件编译成动态库&＃xff1b;打包动态库和打包普通的项目一样&＃xff0c;也需要提供一个配置文件&＃xff0c;素燕建的文件是 webpack.dll.config.js&＃xff0c;内容如下&＃xff1a;

const { resolve } &＃61; require(&＃39;path&＃39;);
const webpack &＃61; require(&＃39;webpack&＃39;);module.exports &＃61; {// 把 jquery 个 vue 打包成动态库entry: {jquery_dll: [&＃39;jquery&＃39;],vue_dll: [&＃39;vue&＃39;]},output: {// 打包后的文件名// [name]为 entry 里的名字(jquery_dll, vue_dll)filename: &＃39;[name].js&＃39;,// 路径为 dllpath: resolve(__dirname, &＃39;dll&＃39;),// 打包库里向外暴露的的名字是什么// var jquery_b1c94c9f341c95430389library: &＃39;[name]_[hash]&＃39;},plugins: [// 生成 manifest 文件new webpack.DllPlugin({name: &＃39;[name]_[hash]&＃39;,path: resolve(__dirname, &＃39;dll/[name].manifest.json&＃39;)})],mode: &＃39;production&＃39;
}


这个配置文件核心做了 3 件事&＃xff1a;

1> 告诉 webpack 要把那些文件打包成 dll&＃xff1b;

2> 把打包后的 dll 放到哪里&＃xff0c;文件名是什么&＃xff0c;使用的名字是什么&＃xff1b;

3> 生成 manifest 文件

我们在 package.json 中添加打包 dll 的命令

"scripts": {"build": "webpack --config webpack.config.js","build:profile": "webpack --config webpack.config.js --profile","build:dll": "webpack --config webpack.dll.config.js"
},


开始打包 npm run build:dll&＃xff1a;

此时会在项目根目录下生成一个 dll 文件夹&＃xff1a;

2、DLLReferencePlugin - 动态库的使用者

动态库打包好了&＃xff0c;webpack 进行项目整体打包的时候&＃xff0c;要告诉它&＃xff0c;“哎&＃xff0c;jquery 和 vue 已经打包好了&＃xff0c;你直接用就行”。所以 webpack.config.js 的 DLL 配置核心是要告诉它哪些文件不需要进行打包。

大伙请看 plugins 中的配置&＃xff1a;

plugins: [new HtmlWebpackPlugin({template: &＃39;./home/index.html&＃39;}),// vue-loader 目前需要 VueLoaderPlugin&＃xff0c;不然会报错// 直接创建了 VueLoaderPlugin 实例new VueLoaderPlugin(),// DLL// jquery 不参与打包new webpack.DllReferencePlugin({manifest: path.resolve(__dirname, &＃39;dll/jquery_dll.manifest.json&＃39;)}),// vue 不参与打包new webpack.DllReferencePlugin({manifest: path.resolve(__dirname, &＃39;dll/vue_dll.manifest.json&＃39;)}),// 在 HTML 中添加动态库 jquery_dll.jsnew AddAssetHtmlWebpackPlugin({filepath: path.resolve(__dirname, &＃39;dll/jquery_dll.js&＃39;)}),// 在 HTML 中添加动态库 vue_dll.jsnew AddAssetHtmlWebpackPlugin({filepath: path.resolve(__dirname, &＃39;dll/vue_dll.js&＃39;)}),
]


HtmlWebpackPlugin 这个我们在 使用 webpack 动态生成 html 讲过&＃xff0c;动态生成 HTML 的。

webpack.DllReferencePlugin 引用的文件是 manifest 文件&＃xff0c;打包动态库时生成的&＃xff0c;告诉 webpack 这些文件不需要打包&＃xff0c;直接用就行。

动态库需要我们把它添加到 HTML 中才会被加载&＃xff0c;不能手动直接在 HTML 中加吧&＃xff0c;会&＃43;被人笑话的。可以使用插件 AddAssetHtmlWebpackPlugin 来添加。

那开始打包吧&＃xff0c;执行 npm  run build:

打开 dist/ index.html&＃xff0c;内容如下&＃xff0c;动态库自动被添加&＃xff1a;

多说无益&＃xff0c;直接看 demo 吧。

https://github.com/lefex/FE/tree/master/webpack/dll

回过头总结一下&＃xff1a;

DLL 就是提前生成一个打包好的库&＃xff0c;webpack 在打包的时候忽略动态库&＃xff0c;但使用动态库的时候需要「手动或自动」把它加到 HTML 中&＃xff0c;这样动态库才能生效。这个过程需要依赖配置文件 manifest 配置文件。

不知道我有没有把 DLL 说明白&＃xff0c;给个反馈&＃xff0c;留言告诉我。

大家加油&＃xff01;

推荐阅读&＃xff1a;

原来实现 CLI 工具如此简单&＃xff0c;以前路走错了