前端性能优化思路

treeshaking 会在什么场景下失效，比如函数内部存在一些副作用，类似于document.title = ''; window.xxx =

副作用是函数式编程的一个概念，是指当调用函数时，除了返回函数值之外，还会对主调用函数产生附加的影响。简单来说，就是除了返回函数值之外，还做了一些别的事情。比如打印 Log、读取和修改外部变量等。引申到应用层面，副作用还可能是导入 DOM 操作、引入 Polyfill 等。 导入的时候不能是export default这种

总体上可以分为三各部分

构建体积优化

• react 懒加载 可以按照页面路由懒加载，也可以按照比如首页看不到的大包进行懒加载 比如一些modal中带上editor这种比较大的包的内容 treeshaking 比如lodash lodash.debounce 这种形式做treeshaking 进一步减少体积

• 使用pnpm 减少一些重复依赖。重复依赖这个部分你可以使用webpack analyze这种去做代码分析。

• 一些大的静态文件不要和前端代码打包到一起，比如css，国际化文案这种

网络请求优化

合适的http缓存：不同的资源加上合适的http缓存，强缓存协商缓存这种，大的js、css文件可以通过gzip格式进行压缩。当然对于现在cdn来说，强缓存和协商缓存基本都是配合使用。当强缓存过期时会继续走协商缓存来判断文件是否真的过期 预解析，对于一些网络情况不好的情况 提高加载速度，比如说webview 内嵌h5，微前端，可以提前加载一些资源，比如一些子应用的js、css文件。 预加载： 比如一些大图片，可以用png 代替svg 提高加载性能，然后请求前置，进行预加载。将高优的内容提前加载

html link标签通过rel 属性可以进行一定的缓存优化

• preload 预加载，提前加载一些图片等静态资源并进行缓存 如果是预加载js的资源 可以用以下代码<link rel="preload" href="" as="script">

• prefetch、prerender 与preload类似，只不过prefetch指定的资源表示在页面未来的导航中可能会被用到，所以资源并不会像preload那样尽早加载。prerender则是在资源被prefetch之后，在浏览器后台进行渲染，当用户查看到这部分内容后，直接展示出来。

• dns-prefetch、preconnect 标签 rel 属性值。dns-prefetch可以让浏览器在资源请求前就开始解析域名。preconnect可以让浏览器预先启动对站点的连接。这两个都是应用于跨域资源。

客户端缓存 serviceworker ssr

js延迟加载：defer和async 预渲染：webpack plugin方案

渲染优化

本质上就是减少回流操作 图片 可以用渐进式图片 虚拟滚动 滚动加载： 以及比如一些首屏加载很多图表，可以通过实时计算页面显示图片的位置，然后只加载可见区域的图片。 一些监听函数减少复杂计算，节流防抖 LongTask 优化

【参考文章】 Web前端性能优化思路; React性能测量和分析; 前端性能优化