用户感知优化
- 添加全局页面的loading www.sucaijishi.com/gif-11-57-1…
2. 添加骨架屏
图片优化
- 小图标引入雪碧图，通过调整不同位置设置图标的显示，减少网页的HTTP请求，提高页面性能，但是维护可能比较麻烦
- 使用图片工具压缩图片
- 图片懒加载，当图片到当前视图的时候加载
- 使用svg或者字体图标，图标放大不失真
webpack优化
- 多线程加载，适用于大型项目，thread-loader是一个可以在Webpack中启用多线程的加载器
3. 缓存加速，优化编译速度，通过cache-loader配置相关的缓存
5. exclude & include合理使用，避免不必要的编译，也是提高编译速度
- 压缩css代码，使用css-minimizer-webpack-plugin压缩代码
8. 压缩js代码，使用terser-webpack-plugin 可以压缩和去重 JavaScript 代码。
9. 压缩html文件
11. 把js文件中无用的模块或者代码删掉，使用tree-shaking，生产环境默认开启
- 使用webpack-bundle-analyzer分析打包体积，进行对应的优化
- 模块懒加载
- gzip文件压缩，使用compression-webpack-plugin，需要nginx配合开启gzip压缩功能
资源加载优化
- 合适场景使用webwoeker，不会阻塞主线程，当进行大量数据计算的时候可以使用这个
- 使用cdn加速，用户可以从距离最近的节点获取资源，从而缩短数据传输的距离和时间。
- 添加预加载，link标签添加preload，预先加载不执行
- 减少http请求，如果首屏请求较多，可以选择在中间层进行整理，通过一个请求返回给前端，
浏览器缓存策略
- 通过对应的缓存策略，强缓存，协商缓存可以提高用户体验
