1.webpack 常见优化手段

提升开发体验

  使用 source-map 让开发或上线时代码报错时能有更加准确的错误提示

提升打包构建速度

  使用 HotModuleReplacement(HMR) 让开发时只需重新编译有变化的代码，不变的代码使用缓存，从而使更新速度更快
  使用 OneOf 让资源文件只会被一种规则匹配，不会继续遍历，提升打包速度
  使用 include/exclude 只检测或排除某些文件，处理文件更少，提升打包速度
  使用 cache 对 eslint 和 babel 处理的结果进行缓存，二次打包更快
  使用 Thread 开启多进程打包，提升打包速度（注意：进程开启需要 600ms 左右的时间，因此只对多文件处理有效，若文件较少，则适得其反）

减少代码体积

  使用 Tree Shaking 剔除没有使用的代码
  @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码
  Image minimizer 对本地图片进行压缩

优化代码运行性能

  使用 code split 分割代码为多个 js 文件，从而是单个文件体积更小，并且加载更快，同时使用 import 动态导入语法进行按需加载
  使用 preload/prefetch 对代码进行提前加载
  使用 network cache 把模块之间的依赖关系保存在一个 runtime 文件中，若依赖的模块发生修改，则会修改 runtime 文件，而不是修改主模块。这样做的好处是：主模块的缓存不会失效，打包编译效率更高
  使用 core-js 进行兼容性处理
  使用 PWA 让代码离线也能访问

2.前端首页白屏优化

首先需要排查、定位原因

网络原因

问题1：包体积过大

解决思路：工程化

① 使用 CDN

• 对于大型库，可以考虑使用CDN进行引入
• 多条产品线，同时使用了同一套前端技术，可以共享这些CDN缓存

② 分包

• 设置加载优先级，比如把首屏需要加载的包分出来，优先加载，也俗称懒加载
• 公共的包（库）分出来，有效利用了浏览器的缓存

③ 对于大量的降级代码（babel或者其他），对用户情况进行考察调研

• 分别打包，对于使用较新版本浏览器的用户，不需要使用降级代码，正常使用新的即可

④ Tree Shaking （前置条件：ESM(编译时态)、无副作用）

问题2：网络差

解决思路：DNS预解析、JS嗅探

① DNS 预解析

② 嗅探

代码执行问题

问题1：JS 执行时间过长

① 寻求是否有更优的算法替代，如 二分查找 替换 遍历查找
② Web Worker 执行耗时任务

渲染问题

问题1：DOM 元素过多

① 分布（分片）渲染
② 虚拟列表