项目打包段性能优化

webpack打包优化

2022前端vue项目重构总结 - 掘金 (juejin.cn)

前端项目常规性能优化 - 掘金 (juejin.cn)

100行代码删除前端项目中的无用文件 - 掘金

如何优化你的 vue-cli 项目：如何优化你的 vue-cli 项目？ - 掘金 (juejin.cn)

通过性能优化，将包的体积：如何通过性能优化，将包的体积压缩了62.7% - 掘金 (juejin.cn)

提高首屏加载速度

我们知道是app.js文件太大，加载时间太长导致了首屏加载速度过慢，我们就需要对症下药减小app.js的大小，提高网站访问速度。

一、压缩

对代码进行压缩，我们可以减小代码的体积量。

二、路由懒加载

当我们使用路由懒加载后，项目就会进行按需加载，其原理就是利用webpack大法的code splitting，当你使用路由加载的写法，webpack就会对app.js进行代码分割，减小app.js的体积，从而提高首屏加载数点。

没使用路由懒加载前的app.js：

使用路由懒加载后对app.js进行code splitting：

三、CDN引入

采用CDN引入，在index.html使用CDN引入，并在webpack配置。打包之后webpack进会从外部打包第三方引入的库,减小app.js的体积，从而提高首屏加载速度。

没使用CDN引入前app.js的大小：

使用CDN引入后app.js的大小：

四、SSR服务器渲染

有局限性，禁用了beforeCreate()和created()之外的其他生命周期，我自己没有亲自测试过，但这是一种方案。

五、增加带宽

增加带宽可以提高资源的访问速度，从而提高首批的加载速度，我司项目带宽由2M升级到5M，效果明显。

六、提取第三方库 vendor

这是也是webpack大法的code splitting，提取一些第三方的库，从而减小app.js的大小。