打包 ​

1. 使用 cache-loader,在 babel-loader 使用 cache。使用 hard-source-webpack-plugin(webpack5 内置)
2. 使用 thread-loader 开启多线程打包
3. 合理利用 splitChunk,将一些不修改的包进行分离
4. 关闭生产 source-map

体积上 ​

1. 情况允许下使用 cdn 加载第三方依赖
2. 使用 splitChunk 提取公共代码

传输中 ​

1. nginx 开启 gzip
2. 使用 http2.0 甚至 http3.0 传输内容
3. 利用 dns-prefetch 与解析 dns
4. 合理设置服务端缓存，提高服务器处理速度。 (强制缓存、对比缓存)
5. 采用域名分片技术，将资源放到不同的域名下。接触同一个域名最多处理 6 个 TCP 链接问题。

运行时 ​

1. script 放在最后面 加上 async|defer 关键字
2. 减少回流
   • 插入大量 dom，可以先用一个 fragmentDoucument
   • 频繁更改 style，可以用 class 代替
   • 将动画加上 position: absolute|fixed 脱离文档流
   • 利用 transform 代替 left top 等；硬件加速

编码上 ​

1. 路由懒加载
2. 组件懒加载
3. 使用事件代理，减少监听
4. 组件库按需引入等等