朝花夕拾

简答-性能优化

4 min read

性能监控

  • Lighthouse 评分（Chrome DevTools）：可以给Performance、Accessibility、SEO等进行打分。
  • LCP (Largest Contentful Paint)：最大内容渲染时间
  • FCP(First Contentful Paint)：初次内容渲染时间
  • FID (First Input Delay)：首次输入延迟
  • CLS (Cumulative Layout Shift)：布局偏移量

网络层面

  • 减少 HTTP 请求：合并文件/图标
  • 压缩资源：gzip压缩、代码压缩（webpack压缩css、js代码）
  • 缓存策略：强缓存、协商缓存
  • CDN加速：静态资源（JS/CSS/图片）部署到 CDN、使用 HTTP/2 多路复用降低延迟
  • http2.0：多路复用、压缩头部
  • 预加载关键资源：preload、prefetch
  • ssr服务端渲染

运行时优化

  • 路由懒加载
  • 减少重排（Reflow）与重绘（Repaint），避免频繁操作 DOM。
  • 虚拟列表优化长列表
  • 防抖（Debounce）与节流（Throttle）
  • Web Worker 处理 CPU 密集型任务，比如大文件上传
  • 避免内存泄漏：未移除的事件监听器‌、未清理的定时器/异步任务‌、闭包保留外部引用‌等等
  • react相关：useMemo、useMemoizedFn、React.memo等等
  • 移除console语句

打包优化

  • Tree Shaking：移除未使用的代码（需 ES Module 语法）
  • 按需加载第三方库
  • 代码分割
  • 移除console语句
// Webpack 配置
module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all', // 包括异步和非异步的chunks
            minSize: 20000, // 模块的最小体积，单位是字节（byte）
            maxSize: 0, // 模块的最大体积，设置为0表示不限制大小，单位是字节（byte）
            minChunks: 1, // 被拆分前必须共享模块的最小块数
            maxAsyncRequests: 30, // 按需加载时的最大并行请求数
            maxInitialRequests: 30, // 入口点的最大并行请求数
            automaticNameDelimiter: '~', // 命名连接符
            name: true, // 使用模块的id作为拆分出的chunk的名字，也可以指定一个函数来自定义命名方式，或者使用true启用Heuristic命名方式（基于模块路径和请求的模块路径）
            cacheGroups: { // 用于指定缓存组来优化chunk的拆分结果，可以继承minSize、maxSize、minChunks等选项来进一步拆分代码块。例如：将所有node_modules中的包拆分出来：
                vendors: { // 组名（或者说缓存组的名称）
                    test: /[\\/]node_modules[\\/]/, // 正则匹配规则，匹配到node_modules目录下的模块才会被拆分出来。这里使用了转义字符[\\/]来匹配路径分隔符，因为在Windows系统中路径分隔符是\，而在类Unix系统中是/。为了兼容性，这里使用了[\\/]来表示路径分隔符的正则表达式。实际上，你也可以直接使用/[\\/]/来匹配路径分隔符，因为在大多数情况下，路径分隔符只会是\或/中的一个。但在某些特殊情况下，例如在某些特定的正则表达式引擎中，可能需要显式地指定路径分隔符的正则表达式。因此，为了更好的兼容性和清晰性，建议使用[\\/]来表示路径分隔符的正则表达式。但是，如果你的代码只在类Unix系统上

Graph View