前端性能优化从以下几方面：

开发编译

• 使用cache-loader/thread-loader开启多线程loader编译

打包

• webpack tree-shaking

webpack 配置 optimization.usedExports = true
其作用是删除没有被其他模块使用的导出语句(如 "foo":()=>(foo)

1.Make阶段，集模块导出变量并记录到模块依赖关系图ModuleGraph变量中
2.Seal阶段，遍历MduleGraph标记模块导出变量有没有被使用
3.生成产物时，若变量没有被使用则删除对应导出语句

• Terser

webpack的配置只能删除导出语句，而变量对应代码还存在，
如（const foo = "foo")，
Terser插件可以删除这类无法被执行到的变量相关语句从而进行彻底的tree-shaking

• 分包（SplitChunksPlugin）

seal生成chunk后 
splitChunkPlugin会在chunk对象上做进一步的拆解和优化，
最后再输出结果（emit）

• 代码压缩

运行时

• 图片懒加载
• 减少http请求，如雪碧图
• 动态import组件
• http缓存

代码层面

• 减少页面回流重绘

附一张webpack主要钩子顺序图