前端性能优化方法
打包构建
- 代码压缩（html, js, css）
module.exports = {optimization: {minimize: true},
};
- resolve 优化
- tree shaking
- 代码分块
module.exports = {optimization: {splitChunks: {chunks: 'all',},},
};
- 提取组件的 CSS
npm install mini-css-extract plugin
资源加载
- 避免CSS阻塞
尽快加载CSS - 避免JS阻塞
使用 async、defer 进行异步加载 - 减少回流和重绘
- 图片压缩、雪碧图
- 预加载 prefetch
- CDN、浏览器缓存
代码编写
- 事件委托
- 节流和防抖
- 路由懒加载
- 图片懒加载
- 组件按需引入、异步加载
- web worker多线程