前端常用的性能优化方案

目录

• • • 性能分析工具
    • • lighthouse
      • Webpack Bundle分析
    • 开发阶段
    • • 按需引入
      • 路由懒加载
    • 打包阶段
    • • 打包配置减少包体积
      • • 配置压缩
        • 分包
      • 资源预加载/预请求
    • 部署阶段
    • • 开启http2
      • 静态资源缓存
      • gzip压缩

性能优化主要在三个阶段进行：开发阶段、开发结束后的打包阶段、项目部署上线阶段

首先需要知道性能优化要达到的目的就是让页面加载更快，也就是需要让代码打包后的体积尽可能的小以及让资源请求时机分配更合理

在我独立开发的博客全栈项目也用到了性能优化，在项目开发结束后不进行优化直接部署上线后后台的lighthouse打分只有50多分，性能很差，白屏时间也长，经过一系列的优化后再次部署上线，前台lighthouse跑分100分，后台也有80多分，加载速度有了很大的提升。

前台lighthouse：

后台lighthouse:

性能分析工具

lighthouse

谷歌浏览器自带的开发者工具，在项目部署上线后可以f12找到lighthouse对项目进行跑分，lighthouse不仅能通过评分直观的看到项目的整体性能情况，还能提出项目的性能问题，可以依照提出的问题对项目进行优化

Webpack Bundle分析

webpack中提供了对打包的项目文件体积直观展示的插件webpack-bundle-analyzer，安装后在vue.config.js中配置，然后在执行了打包命令打包结束后就会自动打开浏览器展示打包的各文件体积，可以直观的看到哪些文件体积过大，也能看到哪些依赖包项目并没有用到却忘了移除，可以通过这个插