vue-cli中terser-webpack-plugin应用实战
说在前面先来说一下这个插件的作用,引用官网的一句话,该插件使用 [terser](https://github.com/terser/terser) 来压缩 JavaScript。我们项目主要用来去除生产环境中的console以及debugger等信息。餐前小菜值得注意的是,vue-cli在开发环境中TerserWebpackPlugin是不会生效的,所以在引入该插件时,即使我们希望只在生产环境中
说在前面
先来说一下这个插件的作用,引用官网的一句话,该插件使用 [terser](https://github.com/terser/terser) 来压缩 JavaScript。
我们项目主要用来去除生产环境中的console
以及debugger
等信息。
餐前小菜
值得注意的是,vue-cli
在开发环境中TerserWebpackPlugin
是不会生效的,所以在引入该插件时,即使我们希望只在生产环境中生效,不需要判断当前的环境。
应用初尝试
vue-cli
对于TerserWebpackPlugin
是有封装的,所以直接按照官网介绍的方式引入是有问题的,当然,问题不是说说而已,下面给大家对比一下不同的引入方式对于打包产生的损耗。
// vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
... // other code
configureWebpack: {
optimization: {
minimizer: [
new TerserPlugin({
parallel: 4,
terserOptions: {
compress: {
warnings: true,
drop_debugger: true, // 删除debugger
drop_console: true // 删除console
}
}
})
],
}
}
此时运行npm run build
命令,可以发现打包时间是:
究其原因,大家此时可以执行一下vue inspect > output.js
命令,查看一下打包的配置文件,搜索关键字minimizer
,可以发现他有两个options
,我们有理由相信,这种情况下去打包,这两个插件会分别处理一遍我们的工程,为什么?
本身vue-cli
会帮我们引入TerserWebpackPlugin
,特定的webpack
版本也会自动引入该插件,在vue.config.js中引入的TerserPlugin
经过定位就是webpack
引入的,所以在webpack
配置中,一共new()
了两次,自然也就会处理两次。
优化尝试
下面我们尝试去覆盖已有的配置,添加删除console
以及debugger
的代码:
// vue.config.js
chainWebpack (config) {
config.optimization.minimizer('terser').tap((args) => {
args[0].parallel = 4
args[0].terserOptions = {
compress: {
warnings: true,
drop_console: true,
drop_debugger: true
}
}
return args
})
}
此时去查看打包配置的文件,搜索minimizer
,可以发现就只有一个options
了,说明我们已经成功完成了合并,但是上面的写法好像把terserOptions
属性完全覆盖了,我们看一下当前的打包时间:
不错,快了40秒左右的时间。
最佳体验
其实vue-cli
给出的配置,肯定是经过优化调整的,所以不是特殊情况,就不要覆盖原有配置了,所以改成下面这种写法:
// vue.config.js
chainWebpack (config) {
config.optimization.minimizer('terser').tap((args) => {
args[0].parallel = 4
args[0].terserOptions.compress.warnings = true
args[0].terserOptions.compress.drop_debugger = true
args[0].terserOptions.compress.drop_console = true
return args
})
}
现在来看看打包的时间:
速度又增加了40秒左右。
说到最后
以上。
更多推荐
所有评论(0)