前端性能优化方法

打包构建

1. 代码压缩（html, js, css）

module.exports = {
  optimization: {
    minimize: true
  },
};

3. resolve 优化
4. tree shaking
5. 代码分块

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

6. 提取组件的 CSS

npm install mini-css-extract plugin

资源加载

1. 避免CSS阻塞
   尽快加载CSS
2. 避免JS阻塞
   使用 async、defer 进行异步加载
3. 减少回流和重绘
4. 图片压缩、雪碧图
5. 预加载 prefetch
6. CDN、浏览器缓存

代码编写

1. 事件委托
2. 节流和防抖
3. 路由懒加载
4. 图片懒加载
5. 组件按需引入、异步加载
6. web worker多线程