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.chain
    const 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.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进行引入

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

大功告成啦~
完结,撒花

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/797878.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C++】哈希(散列)表

目录 一、哈希表的基本概念1.哈希的概念2.哈希冲突2.1 哈希函数2.2 哈希冲突的解决办法2.2.1 闭散列2.2.2 开散列 二、哈希表的实现1.闭散列的实现1.1 闭散列的结构1.2 闭散列的插入1.3 闭散列的删除1.4 闭散列的查找 2.开散列的实现2.1 key值不能取模的情况2.2 开散列的结构2.…

编译x-Wrt 全过程

参考自;​​​​​​c编译教程 | All about X-Wrt 需要详细了解的小伙伴还请参看原文 ^-^ 概念: x-wrt(基于openwrt深度定制的发行版本) 编译系统: ubuntu22.04 注意: 特别注意的是,整个编译过程,都是用 …

线程池笔记

笔记梳理 前言.PHONYC标准库头文件C/C通用或C特有头文件mkdirc_str()snprintfvsnprintfumaskopen函数可变参数列表va_startva_endfunctionalstatic_castpthread_cond_init_threads.emplace_backstd::bindstd::placeholdersThreadPool(const ThreadPool<T> &tp) dele…

springboot系列教程(三):全局异常映射(含源码)

一、异常分类 这里的异常分类从系统处理异常的角度看&#xff0c;主要分类两类&#xff1a;业务异常和系统异常。 1、业务异常 业务异常主要是一些可预见性异常&#xff0c;处理业务异常&#xff0c;用来提示用户的操作&#xff0c;提高系统的可操作性。常见的业务异常提示&…

学会电子期刊制作的必备工具

​随着数字化时代的到来&#xff0c;电子期刊作为一种新型的传播媒介&#xff0c;已经越来越受到大众的青睐。它以环保、便捷、互动性强等特点&#xff0c;逐渐成为传统纸质期刊的重要补充。那么&#xff0c;如何制作一款精美的电子期刊呢&#xff1f;本文将为你介绍学会电子期…

电子电气架构 --- 关于DoIP的一些闲思 上

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

什么? CSS 将支持 if() 函数了?

CSS Working Group 简称 CSSWG, 在近期的会议中决定将 if() 添加到 CSS Values Module Level 5 中。 详情可见&#xff1a;css-meeting-bot 、[css-values] if() function 当我看到这个消息的时候&#xff0c;心中直呼这很逆天了&#xff0c;我们知道像 less 这些 css 这些预…

给 「大模型初学者」 的 LLaMA 3 核心技术剖析

编者按&#xff1a; 本文旨在带领读者深入了解 LLaMA 3 的核心技术 —— 使用 RMSNorm 进行预归一化、SwiGLU 激活函数、旋转编码&#xff08;RoPE&#xff09;和字节对编码&#xff08;BPE&#xff09;算法。RMSNorm 技术让模型能够识别文本中的重点&#xff0c;SwiGLU 激活函…

传输层重点协议

目录 一、TCP协议 TCP协议段落格式 原理 1、确认应答机制 2、超时重传机制 3、连接管理机制 三次握手 四次挥手 &#xff08;1&#xff09;不能合并为三次挥手的原因 &#xff08;2&#xff09;延时应答机制—实现合并 &#xff08;3&#xff09;TIME_WAIT的作用 &…

代码随想录——不同路径Ⅱ(Leetcode 63)

题目链接 动态规划 class Solution {public int uniquePathsWithObstacles(int[][] obstacleGrid) {int m obstacleGrid.length;int n obstacleGrid[0].length;int[][] dp new int[m][n];// 遇到障碍则从(0,0)到达for(int i 0; i < m && obstacleGrid[i][0] …

基于Vue和UCharts的前端组件化开发:实现高效、可维护的词云图与进度条组件

基于Vue和UCharts的前端组件化开发&#xff1a;实现高效、可维护的词云图与进度条组件 摘要 随着前端技术的迅速发展和业务场景的日益复杂&#xff0c;传统的整块应用开发方式已无法满足现代开发的需求。组件化开发作为一种有效的解决方案&#xff0c;能够将系统拆分为独立、…

浏览器出现 502 Bad Gateway的原理分析以及解决方法

目录 前言1. 问题所示2. 原理分析3. 解决方法 前言 此类问题主要作为疑难杂症 1. 问题所示 2. 原理分析 502 Bad Gateway 错误表示服务器作为网关或代理时&#xff0c;从上游服务器收到了无效的响应 通常出现在充当代理或网关的网络服务器上&#xff0c;例如 Nginx、Apache…

Go 语言返回组装数据

文章id 文章标题 ..... 分类 字段 &#xff1a;[分类名&#xff0c;分类描述 .... ]标签字段 : [标签名, 标签id ..... ]type ArticleWithCategoryLabel struct {system.SysArticleCategoryName system.SysCategorie json:"category_name"LabelName system.SysLab…

2024年7月13日全国青少年信息素养大赛Python复赛小学高年级组真题

第一题 题目描述 握情况。他决定让每个人输入一个正整数 N (0≤N≤1000)&#xff0c;然后计算并输出(5*N)的值。请用 在一个神秘的王国里&#xff0c;国王希望通过一个简单的测试来评估他的子民对基 础数学运算的掌 Python 编写程序&#xff0c;程序执行后要求用户输入一个正…

50、haproxy+keepalive+nginx

keepalivehaproxy 客户端&#xff1a;192.168.168.21haproxy1&#xff1a;192.168.168.43haproxy2&#xff1a;192.168.168.44vip&#xff1a;192.168.168.100nginx1:192.168.168.31nginx2:192.168.168.32haproxykeepalive做高可用nginx做后台haproxy1haproxy2一起操作&#x…

121. 小红的区间翻转(卡码网周赛第二十五期(23年B站笔试真题))

题目链接 121. 小红的区间翻转&#xff08;卡码网周赛第二十五期&#xff08;23年B站笔试真题&#xff09;&#xff09; 题目描述 小红拿到了两个长度为 n 的数组 a 和 b&#xff0c;她仅可以执行一次以下翻转操作&#xff1a;选择a数组中的一个区间[i, j]&#xff0c;&#x…

监控房价和挂牌数量的工具-以成都房价为例

介绍 本文将介绍如何通过zervice提供的工具来监控成都房价&#xff08;其他城市或者地区类似&#xff09;&#xff0c;包括价格和挂牌数量。可以对购房一族提供数据参考。 数据来源 数据来源方面&#xff0c;本文以成都为例&#xff0c;我们会使用链家数据-> 选择地图找房…

《Linux系统编程篇》Visual Studio Code配置下载,中文配置,连接远程ssh ——基础篇

引言 vscode绝对值得推荐&#xff0c;非常好用&#xff0c;如果你能体会其中的奥妙的话。 工欲善其事&#xff0c;必先利其器 ——孔子 文章目录 引言下载VS Code配置VS Code中文扩展连接服务器 连接服务器测试确定服务器的IP地址VS code 配置ssh信息选择连接到主机选择这个添…

【JVM实战篇】内存调优:内存泄露危害+内存监控工具介绍+内存泄露原因介绍

文章目录 内存调优内存溢出和内存泄漏内存泄露带来什么问题内存泄露案例演示内存泄漏的常见场景场景一场景二 解决内存溢出的方法常用内存监控工具Top命令优缺点 VisualVM软件、插件优缺点监控本地Java进程监控服务器的Java进程&#xff08;生产环境不推荐使用&#xff09; Art…

微信小程序毕业设计-青少年科普教学系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…