前言
在上一篇中叙述了在资源请求层面对于性能进行优化，接下来就看一下在项目中产生出来的资源本身应该要怎么样进行优化呢。这里就从webpack构建出发。
webpack构建
代码压缩
这个是最容易想到的，对产物的css和js进行压缩，从webpack5开始js部分在生产环境构建时会默认使用tensor进行代码压缩，css压缩可以使用CssMinimizerWebpackPlugin。对于图片资源也有对应的压缩插件，如果项目中的图片没有进行压缩的话。
code split
使用webpack-bundle-analyzer可以去做产物大小的分析。目前项目一般都是单页应用，这个时候为了去加快页面的打开速度，代码分离就变得很重要了。SplitChunksPlugin的配置可以对项目中的公共依赖进行单独打包。注意cacheGroups的设置，常见的设置是针对组件库，react库这些。然后是业务中可以结合react.lazy和import(）这去针对页面进行code-split。
component: lazy(() => import('../pages/Home'))。对react lazy感兴趣的可以拓展看一下react.lazy原理。
Tree-shaking
这个部分webpack4以上在生产环境都是默认开启的，怎么看webpack构建优化的最大方式就是把webpack升到最新。 可以了解一下Tree-shaking干了什么。简单说就是利用es6module的静态模块的特性去分析，并且去除没有用js模块。
Scope-Hoisting
Scope-Hoisting是将所有模块按照引用顺序放在一个函数作用域中，并适当的重命名一些变量名，防止变量名冲突，从而减少代码体积，减少闭包函数的内存开销。和Tree-shaking一样也是默认生产环境开启，加支持es6module。
第三方依赖的分析
举个例子，对于一些第三方依赖有没有更轻量化的替代呢？比如 用day.js替换moment.js。比如第三方组件库的按需引入，特别是组件库和echarts这些。webpack-libs-optimizations也可以对于第三方依赖进行优化。
移除无用的css
构建加速
- 开启构建缓存
- esbuild
- happypack
