前端性能优化汇总

更新时间: 5/8/2024字数: 0 字

1. 懒加载

   路由懒加载、组件懒加载、图片懒加载

   图片懒加载

2. npm 包内容按需加载

3. tree-shaking

   依赖于 ES6 的模块特性，ES6 模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是 tree-shaking 的基础。

   静态分析就是不需要执行代码，就可以从字面量上对代码进行分析。

   ES6 之前的模块化，比如 CommonJS 是动态加载，只有执行后才知道引用的什么模块，就不能通过静态分析去做优化，正是基于这个基础上，才使得 tree-shaking 成为可能。

   tree-shaking 并不是 100%能把没有使用到的代码不打包进项目中。export default 导出的是一个对象，无法通过静态分析判断出一个对象的哪些变量未被使用。

   tree-shaking 只对使用 export 导出的变量生效。

   export default {
     fn1() {
       return 'xxx'
     },
     fn2() {
       return 'yyy'
     }
   }
   
   // 使用
   import utils from './utils'
   
   utils.fn1()

4. externals

   使用 externals 来提取一些不需要频繁更新的依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到 chunk-vendors.js 中。

   好处：减小包体积、提高加载速度和利用浏览器缓存。

   缺点：直接在 html 内引入的，失去了按需引入的功能，要引入组件库完整的 js 和 css

   谨慎使用，防止 cdn 不稳定，项目页面挂掉的可能性。

5. 长列表虚拟滚动

   当渲染条数过多时，所需要的渲染时间会很长，滚动时还会造成页面卡顿，整体体验不好。

   虚拟滚动是在滚动时动态更新可视区域中的内容，只渲染可视区域的列表项，非可见区域的内容不渲染。

6. 骨架屏

   SPA 单页应用，最初的 html 都是空白的，需要通过加载 JS 将内容挂载到根节点上，这套机制的副作用：会造成长时间的白屏。

   骨架屏插件原理：在项目打包时将骨架屏的内容直接放到 html 文件的根节点中。

7. 缓存

   缓存静态资源

   缓存接口数据

8. gzip 压缩

   在 webpack 中安装插件。或者 nginx 中配置