webpack拆包优化

前言

最近测试同学来反应，app里面嵌套h5，打开的时候，显示有点慢，所以这边对现有项目做一个优化，顺便记录一下。

思考🤔

技术栈使用的是vue，首屏加载的时候请求3个js，一个是app.js,一个是chunk.js,一个是页面js

可以看出chunk这个文件过大，所以我们需要从这个文件入手，下手之前，需要了解这个文件主要包含什么，这个文件主要包含我们开发的时候node_modules文件中的第三方依赖。所以我们这边可以把一些不经常变动的第三方依赖单独提取出来，这样就可以减小chunk文件的体积。

webpack打包优化

新建一个新的项目，安装我们需要的依赖vuex、vue-router、axios

package.json文件如下

webpack未优化之前打包

使用webpack优化

我们可以使用webpack中的DllPlugin插件来拆分我们的chunk
在开发环境安装webpack webpack-cli，然后新建weback.config.dll.js,内容如下

然后在package.json script中新增"dll": "webpack --config webpack.config.dll.js"
然后执行yarn dll,我们会发现在public新增一个了一个vendor.dll.js，然后在index.html中在head中把vendor.dll.js引入，根目录新增了一个vendor-manifest.json, 这个文件是用来让 webpack的DLLReferencePlugin 映射到相关的依赖上去的。
然后在新建vue.config.js代码如下

然后打包，打包后的文件如下。

可以明显看到，chunk文件小了很多。我们生成的vendor.dll.js里面的依赖很少改变，所以我们这边直接上传到cdn上面，设置缓存为半年，这样我们多个项目都可以依赖这个文件，每次请求的时候直接请求的缓存，所以加载的就很快了。

参考链接

www.webpackjs.com/plugins/dll…