【填坑】webpack5中optimize-css-assets-webpack-plugin无法实现压缩css

一开始以为是OptimizeCssAssetsWebpackPlugin插件没有使用,然后查看了plugins已经使用了OptimizeCssAssetsWebpackPlugin。啊?这啥情况?

最后找到了皮蛋很白大佬的webpack二刷之五、生产环境优化(5.提取压缩CSS)文章,写的也很清楚,原来是:
webpack官方文档介绍时并不是将 「OptimizeCssAssetsWebpackPlugin」 插件配置在「plugins」数组中。
而是配置在 「optimization.minimizer」 数组中。
原因是:
配置在「plugins」中,webpack就会在启动时使用这个插件。
而配置在 「optimization.minimizer」 中,就只会在「optimization.minimize」这个特性开启时使用。
所以webpack推荐,像压缩类的插件,应该配置在「optimization.minimizer」数组中。
以便于通过「optimization.minimize」统一控制。(生产环境会默认开启minimize)

当时以为这样就完了呢,一键三连之后就没看了,最后在运行项目的时候发现JS在生产环境下居然不能压缩。。。。。

最后又返回到大佬的文章,这次看清了:
然而这样配置会导致JS不会被压缩。
原因是webpack认为,如果配置了minimizer,就表示开发者在自定以压缩插件。
内部的JS压缩器就会被覆盖掉。所以这里还需要手动将它添加回来。
webpack内部使用的JS压缩器是「terser-webpack-plugin」。
注意:手动添加需要安装这个插件才能使用。

大佬就是大佬,太透彻了!!!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值