前端性能优化

• Webpack

> 并行构建
> 可视结构（BundleAnalyzer直观分析打包文件）
>（减少重复代码的出现频率）分割代码（splitChunks）
>（删除项目中未被引用代码）摇树优化
> 动态垫片

• 资源加载优先级

> 引入非系统字体时，防止字体闪烁，预加载字体文件
> DNS预解析（dns-prefetch）

• 资源按需加载

> 骨架屏
> 图片懒加载，传统的lazyLoad(原理)、H5 Intersection Observer (lozad)
> 对长列表数据进行数据冻结，减少劫持和初始化开销
> 路由懒加载 （运行时动态import组件，避免一次性加载所有页面）
> 使用字体图标代替图片图标（不失真，文件小）

• HTTP优化

> 合并请求多个小文件为一个大文件（小文件相对开销大）
> 静态资源使用CDN（内容分发网络）
> 根据资源的变动频率使用对应的缓存策略

• More优化

可以考虑使用HTTP2

SSR 后端渲染

参考资料:

juejin.cn/post/698167… juejin.cn/post/689299… juejin.cn/post/684490… juejin.cn/post/700170… mp.weixin.qq.com/s/P8PEI2GNP… blog.csdn.net/zeroJustGG/…