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