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

大功告成啦~

完结,撒花

相关推荐
qq_174482857510 小时前
基于微信小程序的小动物救助领养平台
微信小程序·小程序
生椰拿铁You14 小时前
15 —— Webpack中的优化——前端项目使用CDN技术
前端·webpack
wcy011215 小时前
微信小程序+Vant-自定义选择器组件(单选带筛选
微信小程序·小程序
Amd79416 小时前
Nuxt.js 应用中的 webpack:done 事件钩子
ui·webpack·编译·nuxt.js·加载·清理·钩子
Fresh-eyes17 小时前
iphone小程序设置burpsuite代理抓包
运维·服务器·小程序
paterWang17 小时前
小程序-基于java+SpringBoot+Vue的铁路订票平台小程序设计与实现
java·spring boot·小程序
流着口水看上帝17 小时前
一文掌握如何用python开发小程序
python·小程序
非著名程序员17 小时前
15分钟做完一个小程序,腾讯这个工具有点东西
小程序
1登峰造极17 小时前
uniapp中uni-popup在小程序中滚动穿透问题
小程序·uni-app
我很苦涩的18 小时前
原生微信小程序画表格
微信小程序·小程序·notepad++