webpack5手动搭建vuecli

前端 0 952 0
发表于: 2021-05-16 23:41:14

简介: 暂无~

webpack5搭建vuecli

话不多说,先上最终打包结果对比图:

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

vuecli包大小.png

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

hss_webpack5包大小.png

做了什么优化?

  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进行加载需要用到的第三方库
webpack JavaScript

最后更新于:2021-05-16 23:41:14

欢迎评论留言~
0/400
支持markdown
Comments | 0 条留言
按时间
按热度
目前还没有人留言~