构建优化

产物压缩

构建工具经常会利用 parser 和 SWC 的做 js 产物体积压缩、

有其他需要可以引入 plugin

例如 webpack 可用

• UglifyJsPlugin 压缩 js 代码
• CompressionWebpackPlugin 用于对打包后的资源文件进行 gzip 压缩

额外：extract

大文件分解成小文件，总大小会增加，为什么也能算到构建优化中呢

比如 webpack 插件 MiniCssExtractPlugin 用于将 CSS 提取为单独的文件 CSS 中可以通过 MiniCssExtractPlugin 为 CSS 文件设置 hash

这里提取并设置 hash 好处在于

• 把大文件分成小文件做请求，可以多路复用
• 对小文件选择性缓存，而不是大文件一次改动就破坏掉了曾经的缓存

这种长短期缓存要去运维那边配置 长时间不太可能变更的（比如 common 模块），直接设置一年缓存期