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
大功告成啦~
完结,撒花
相关文章:
taro小程序terser-webpack-plugin插件不生效(vue2版本)
背景 最近在做公司内部的小程序脚手架,为了兼容老项目和旧项目,做了vue2taro,vue3taro两个模板,发现terser-webpack-plugin在vue2和vue3中的使用方式并不相同,同样的配置在vue3webpack5中生效,但是在vue2webpack4中就…...
games103作业2(未完)
PBD方法 首先是每个质点的力的分析,不考虑碰撞和弹簧弹力的情况下,每个质点受重力的影响,所以需要对每个质点进行速度和位置的重力影响更新。 float t 0.0333f; float damping 0.99f; int[] E; float[] L; Vector3[] V; Vector3 gra…...
避免 WebSocket 连接被拒绝
一、检查服务器配置和权限 (一)确认服务器访问权限 确保您的客户端有访问服务器的合法权限。如果服务器设置了访问控制列表(ACL)或仅允许特定的源(Origin)进行连接,您需要确保客户端的请求来源在允许的范围内。例如,如果服务器只允许来自特定域名的连接,而您的客户端从…...
shell中关于数组的使用
shell中关于数组的使用 在Shell中,数组是一种可以存储多个值的变量。数组的每个值都由一个数字索引来访问。在Shell中,数组的索引从0开始。 数组的常见的使用方法包括 数组的定义数组的打印数组长度数组的遍历数组元素的打印数组元素的添加数组元素的…...
python:绘制一元三次函数的曲线
编写 test_x3_3x.py 如下 # -*- coding: utf-8 -*- """ 绘制函数 y x^33x4 在 -3<x<3 的曲线 """ import numpy as np from matplotlib import pyplot as plt# 用于正常显示中文标题,负号 plt.rcParams[font.sans-serif] […...
SAP PP学习笔记26 - User Status(用户状态)的实例,订单分割中的重要概念 成本收集器,Confirmation(报工)的概述
上面两章讲了生产订单的创建以及生产订单的相关内容。 SAP PP学习笔记24 - 生产订单(制造指图)的创建_sap 工程外注-CSDN博客 SAP PP学习笔记25 - 生产订单的状态管理(System Status(系统状态)/User Status(用户状态)),物料的可用性检查,生…...
ctfshow-web入门-php特性(web104-web108)
目录 1、web104 2、web105 3、web106 4、web107 5、web108 1、web104 需要传入的 v1 和 v2 进行 sha1 加密后相等。 解法1: 这里都没有判断 v1 和 v2 是否相等,我们直接传入同样的内容加密后肯定也一样。 ?v21 post: v11 拿到 flag…...
python之集合相关
1.概况 是无序的数据结构 集合内的个体统称为元素,每个元素不可重复 所有元素被放在大括号里面,元素之间通过逗号分隔 集合对象是一组无序的可哈希的值,集合元素是不可变的数据类型 2.定义集合 使用大括号语法 基本语法: {元素1&a…...
【学习笔记】无人机(UAV)在3GPP系统中的增强支持(十一)-无人机服务可用性用例需求
引言 本文是3GPP TR 22.829 V17.1.0技术报告,专注于无人机(UAV)在3GPP系统中的增强支持。文章提出了多个无人机应用场景,分析了相应的能力要求,并建议了新的服务级别要求和关键性能指标(KPIs)。…...
【Linux 配置静态IP】Ubuntu20.04
最近学习网络编程,为了方便学习需要Ubuntu配置静态IP,网上看了好多贴子跟着试了下可以实现,但重启虚拟机后有时就无法连接,总之各种各样问题;相关的配置方法也比较凌乱,有用netplan 或者 ifupdown ,笔者简单…...
C++入门基础(2)
C入门基础(2) 1.缺省函数2.函数重载3.引用3.1 引用的概念和定义3.2 引用的特性3.3 引用的使用3.3.1引用的特性 4 .const引用5. 指针和引用的关系6.inline 1.缺省函数 • 缺省参数是声明或定义函数时为函数的参数指定⼀个缺省值。在调用该函数时…...
芋道框架万字详解(前后端分离)、若依框架、yudao-cloud保姆级攻略
♥️作者:小宋1021 🤵♂️个人主页:小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识,和大家一起努力呀!!! 🎈🎈加油! 加油!…...
Java程序打印日志
一、maven依赖 POM文件中添加以下依赖,maven依赖的jar包版本可以在maven central repository 查看 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.34</version><…...
深入理解C++ 中的可调⽤对象
C中的可调⽤对象总结 普通函数类成员函数类静态成员函数与类成员函数的区别 仿函数简单示例高级用法-状态保持优缺点优点缺点 函数指针获取函数地址声明并调用函数指针 lambda表达式语法定义捕获单个捕获符 std::function()协程 可调用对象用处⼴泛: ⽐如在使⽤⼀些…...
汇编程序调用 C 程序详解
文章目录 1. ATPCS 规则 2. 汇编和C程序传递参数 汇编程序向 C 程序的函数传递参数 C 程序返回结果给汇编程序 代码示例 3. C 函数使用栈 4. C 语言中读写寄存器 在嵌入式开发中,经常需要在 C 程序和 ARM 汇编程序之间进行相互调用。为了保证这些调用的正确性…...
代码随想三刷图论篇1
代码随想三刷图论篇1 98. 所有可达路径题目代码99. 岛屿数量题目代码100. 岛屿的最大面积题目代码101. 孤岛的总面积题目代码102. 沉没孤岛题目代码103. 水流问题题目代码98. 所有可达路径 题目 链接 代码 import java.util.*;class Main{public static void main(String […...
Windows 快捷键汇总
Windows 快捷键汇总 前言进阶快捷键【最好用】Chrome 常用快捷键【跟 Windows 快捷键不搭杆,但常用】基础快捷键扩展快捷键 前言 Coder 苦鼠标久已,整理汇总 Windows 快捷键包括一些常用的快捷键,比如“浏览器”相关的快捷键内容分为四小节&…...
微服务有哪些组件?
1.注册中心:用于服务的注册和发现,管理微服务的地址 Nacos,Eureka 2.配置中心:集中管理微服务的配置中心 Nacos config 3.远程调用:用于不同微服务间的通信和协作 RESTful API(RestTemplate࿰…...
camera-qsc-crosstalk校准数据XTALK回写
问题背景 手机越做越紧凑,需要模组和芯片尺寸越做越小,在尺寸一定的基础上,高像素和大像素,对于手机摄像头来说,一直是一对矛盾的存在。 高像素:带来高分辨率画质大像素:带来暗态下高感光度和…...
混合贪心算法求解地铁线路调度
一、问题描述 城市轨道交通的繁荣发展,带来了车辆资源需求的日益增加。如何兼顾运营服务水平和运营成本,以最少的车底优质地完成运输任务成为一大严峻问题。本题在后续的描述中将由多辆动车和拖车组合而成的车组称为车底。在日常的运营组织中࿰…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...
深入浅出Diffusion模型:从原理到实践的全方位教程
I. 引言:生成式AI的黎明 – Diffusion模型是什么? 近年来,生成式人工智能(Generative AI)领域取得了爆炸性的进展,模型能够根据简单的文本提示创作出逼真的图像、连贯的文本,乃至更多令人惊叹的…...
实战设计模式之模板方法模式
概述 模板方法模式定义了一个操作中的算法骨架,并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下,重新定义算法中的某些步骤。简单来说,就是在一个方法中定义了要执行的步骤顺序或算法框架,但允许子类…...
一些实用的chrome扩展0x01
简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序,无论是测试应用程序、搜寻漏洞还是收集情报,它们都能提升工作流程。 FoxyProxy 代理管理工具,此扩展简化了使用代理(如 Burp…...
密码学基础——SM4算法
博客主页:christine-rr-CSDN博客 专栏主页:密码学 📌 【今日更新】📌 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 编辑…...
「Java基本语法」变量的使用
变量定义 变量是程序中存储数据的容器,用于保存可变的数据值。在Java中,变量必须先声明后使用,声明时需指定变量的数据类型和变量名。 语法 数据类型 变量名 [ 初始值]; 示例:声明与初始化 public class VariableDemo {publi…...
欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱?分层思维来救场!
多连接 BLE 怎么设计服务不会乱?分层思维来救场! 作者按: 你是不是也遇到过 BLE 多连接时,调试现场像网吧“掉线风暴”? 温度传感器连上了,心率带丢了;一边 OTA 更新,一边通知卡壳。…...
