构建优化
产物压缩
构建工具经常会利用 parser 和 SWC 的做 js 产物体积压缩、
有其他需要可以引入 plugin
例如 webpack 可用
- UglifyJsPlugin 压缩 js 代码
- CompressionWebpackPlugin 用于对打包后的资源文件进行 gzip 压缩
额外:extract
大文件分解成小文件,总大小会增加,为什么也能算到构建优化中呢
比如 webpack 插件 MiniCssExtractPlugin 用于将 CSS 提取为单独的文件 CSS 中可以通过 MiniCssExtractPlugin 为 CSS 文件设置 hash
这里提取并设置 hash 好处在于
- 把大文件分成小文件做请求,可以多路复用
- 对小文件选择性缓存,而不是大文件一次改动就破坏掉了曾经的缓存
这种长短期缓存要去运维那边配置 长时间不太可能变更的(比如 common 模块),直接设置一年缓存期