关于 css 文件【单独提取与压缩】

162 阅读1分钟
<1> css 文件的单独提取【MiniCssExtractPlugin】

当 css 文件体积过大时,如果还全部通过 style-loader 加载器,把 css 文件通过 < style /> 标签插入到 js 文件中时,就会影响性能!!!

此时就可以把 css 文件单独提取出来,然后通过 < Link /> 标签引入进去!!

注意:

  • 如果 css 文件体积过小时,这样干反而会多此一举!!!

配置插件:

2305.png

配置加载器:

2306.png

<2> css 文件的压缩【optimize-css-assets-webpack-plugin】

webpack 内部会自动压缩 js 类型的文件。而对于 css 类型的文件需要我们手动配置!!

有关压缩的插件可以统一配置到 optimization 的 minimizer 数组中,方便通过压缩属性的是否开启,来统一控制这些插件。(生产模式下 minimizer 属性是自动开启的)

2307.png

注意:

  • 此时会发现 js 文件又不会被压缩了!!

是因为 我们配置了 minimizer数组后,webpack 就会认为,我们要使用自定义的压缩插件去完成压缩操作!!那么内置的 js 压缩器就会被覆盖掉而不会工作!!

手动配置压缩 js: 【TerserWebpackPlugin】

2308.png