webpack5手动搭建vuecli

webpack5搭建vuecli

话不多说，先上最终打包结果对比图：

原本使用vue脚手架写的项目，在没做优化的情况下，最终的打包结果：

段落引用使用webpack5自己手动搭建的vue脚手架，且做了代码优化后的最终打包结果：

做了什么优化?

1. 使用compression-webpack-plugin进行http压缩
2. 使用@vue/preload-webpack-plugin进行预获取/预加载
3. 使用terser-webpack-plugin进行压缩、转化/混淆
4. 使用webpack.optimize.ModuleConcatenationPlugin()进行作用域提升
5. 使用purgecss-webpack-plugin进行css TreeShaking，有bug暂时不做优化
6. optimization中配置usedExports为true，来帮助Terser进行优化；package.json中配置sideEffects，直接对模块进行优化；
7. 使用cdn进行加载需要用到的第三方库