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里面配置了四个命令,如下:

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源码已经知道在生产环境的时候,源码里面会自动使用压缩

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

js 复制代码
// 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, // 不改变函数名称
                },
              },
            ],
          },
        },
      })
    },
  },
}

运行

bash 复制代码
npm run dev:weapp

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

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

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

运行

bash 复制代码
npm run dev:build:weapp

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

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

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

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

js 复制代码
//minifyMainPackage.js
const TerserPlugin = require('terser-webpack-plugin')

module.exports = (ctx) => {
  ctx.modifyWebpackChain(args => {
    const chain = args.chain
    const minimizers = chain.optimization.get('minimizer') || []
    console.log(minimizers,'==minimizers')
    .....
    })
}

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

bash 复制代码
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加了一个判断,判断插件存在就不再创建

附上完整代码

js 复制代码
//minifyMainPackage.js
const TerserPlugin = require('terser-webpack-plugin')

module.exports = (ctx) => {
  ctx.modifyWebpackChain(args => {
    const chain = args.chain
    const 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进行引入

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

对啦,记得安装插件呀~

bash 复制代码
npm install -D terser-webpack-plugin@3.0.5

大功告成啦~

完结,撒花

相关推荐
说私域1 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165022 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦9 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck14 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23416 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟16 小时前
小程序跳转另一个小程序
小程序
19 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
1 天前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji1 天前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序