taro小程序terser-webpack-plugin插件不生效(vue2版本)

背景

最近在做公司内部的小程序脚手架，为了兼容老项目和旧项目，做了vue2+taro,vue3+taro两个模板，发现terser-webpack-plugin在vue2和vue3中的使用方式并不相同，同样的配置在vue3+webpack5中生效，但是在vue2+webpack4中就不生效

vue3模板的解决办法在taro小程序terser-webpack-plugin插件不生效 已经做了说明，本文主要介绍在vue2+webpack4中的解决办法。

遇到的问题

首先说明下前提，关于微信小程序，我在package.json里面配置了四个命令，如下：

    "build:weapp": "taro build --type weapp",   //生产环境"prod:weapp": "cross-env NODE_ENV=production npm run build:weapp -- --watch",  //生产环境热编译"dev:build:weapp": "cross-env NODE_ENV=development npm run build:weapp", //测试环境非热编译"dev:weapp": "cross-env NODE_ENV=development npm run build:weapp -- --watch",  //测试环境热编译

通过查看taro源码已经知道在生产环境的时候，源码里面会自动使用压缩

所以只需要在测试环境的时候做配置即可，接着按照官网做了以下配置

// config/dev.js
module.exports = {mini: {webpackChain: (chain, webpack) => {chain.merge({plugin: {install: {plugin: require('terser-webpack-plugin'),args: [{terserOptions: {compress: true, // 默认使用terser压缩keep_classnames: true, // 不改变class名称keep_fnames: true, // 不改变函数名称},},],},},})},},
}

运行

npm run dev:weapp

发现确实起到了压缩效果，demo编译后的体积由836kb变成了334kb

以为到这一步就大功告成啦，no,no,no,才刚刚开始~，哈哈哈哈，接下来意想不到的发生啦…

当然如果你不需要配置dev:build:weapp这条命令，当我没说…

运行

npm run dev:build:weapp

发现并没有打包成功，提示这个文件和已有的文件冲突

然后开始排查错误，看了文档中附的这个链接《编写插件，将 Taro 编译打包耗时缩短至三分之一》。

删除前面的配置，按照这个文档进行配置(不做详细介绍，文档里面都有)，发现报如下错误：

在minifyMainPackage.js里面打印minimizers，发现已经存在terser插件,如果再创建就会报错

//minifyMainPackage.js
const TerserPlugin = require('terser-webpack-plugin')module.exports = (ctx) => {ctx.modifyWebpackChain(args => {const chain = args.chainconst minimizers = chain.optimization.get('minimizer') || []console.log(minimizers,'==minimizers').....})
}

此时运行如下，却发现并不会报错

npm run dev:weapp

但是minimizers打印出来的是[]

由此可以看出，dev:build:weapp的时候terser已经存在无需重新添加，但是dev:weapp的时候terser却不存在。

结合源码，然后开始各种排查，发现dev:build:weapp的时候虽然打印process.env.NODE_ENV出来的是development，进入的是dev.js里面的逻辑，但是在taro内部还是按照 production 添加了terser-webpack-plugin插件，再次添加就会报错。

因此在minifyMainPackage.js加了一个判断，判断插件存在就不再创建

附上完整代码

//minifyMainPackage.js
const TerserPlugin = require('terser-webpack-plugin')module.exports = (ctx) => {ctx.modifyWebpackChain(args => {const chain = args.chainconst minimizers = chain.optimization.get('minimizer') || []// 检查是否已存在TerserPlugin实例，避免重复添加const hasTerser = minimizers.some(minimizer => {return minimizer.constructor.name === 'TerserPlugin'})//没有则创建if(!hasTerser){chain.optimization.minimize(true)chain.merge({optimization: {minimize: true,minimizer: [new TerserPlugin({test: /\.(?:[js]sx?|mjs)$/, // 一般匹配JavaScript和JSX文件，根据需要调整parallel: true,minify: TerserPlugin.swcMinify,cache: true,extractComments: true,sourceMap: true,terserOptions: {parse: {ecma: 8,},compress: {ecma: 5,warnings: false,arrows: false,collapse_vars: false,comparisons: false,computed_props: false,hoist_funs: false,hoist_props: false,hoist_vars: false,inline: false,loops: false,negate_iife: false,properties: false,reduce_funcs: false,reduce_vars: false,switches: false,toplevel: false,typeofs: false,booleans: true,if_return: true,sequences: true,unused: true,conditionals: true,dead_code: true,evaluate: true,},output: {ecma: 5,comments: false,ascii_only: true,},},}),],},})}})
}

然后在dev.js进行引入

const path = require('path')
module.exports = {env: {NODE_ENV: '"development"'},defineConstants: {},plugins: [ path.resolve(__dirname, './minifyMainPackage.js')],mini: {},h5: {}}
}

对啦，记得安装插件呀~

npm install -D terser-webpack-plugin@3.0.5

大功告成啦~
完结，撒花