当前位置: 首页 > news >正文

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# 用于正常显示中文标题&#xff0c;负号 plt.rcParams[font.sans-serif] […...

SAP PP学习笔记26 - User Status(用户状态)的实例,订单分割中的重要概念 成本收集器,Confirmation(报工)的概述

上面两章讲了生产订单的创建以及生产订单的相关内容。 SAP PP学习笔记24 - 生产订单&#xff08;制造指图&#xff09;的创建_sap 工程外注-CSDN博客 SAP PP学习笔记25 - 生产订单的状态管理(System Status(系统状态)/User Status(用户状态)),物料的可用性检查&#xff0c;生…...

ctfshow-web入门-php特性(web104-web108)

目录 1、web104 2、web105 3、web106 4、web107 5、web108 1、web104 需要传入的 v1 和 v2 进行 sha1 加密后相等。 解法1&#xff1a; 这里都没有判断 v1 和 v2 是否相等&#xff0c;我们直接传入同样的内容加密后肯定也一样。 ?v21 post&#xff1a; v11 拿到 flag…...

python之集合相关

1.概况 是无序的数据结构 集合内的个体统称为元素&#xff0c;每个元素不可重复 所有元素被放在大括号里面&#xff0c;元素之间通过逗号分隔 集合对象是一组无序的可哈希的值&#xff0c;集合元素是不可变的数据类型 2.定义集合 使用大括号语法 基本语法&#xff1a; {元素1&a…...

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(十一)-无人机服务可用性用例需求

引言 本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。…...

【Linux 配置静态IP】Ubuntu20.04

最近学习网络编程&#xff0c;为了方便学习需要Ubuntu配置静态IP&#xff0c;网上看了好多贴子跟着试了下可以实现&#xff0c;但重启虚拟机后有时就无法连接&#xff0c;总之各种各样问题&#xff1b;相关的配置方法也比较凌乱&#xff0c;有用netplan 或者 ifupdown ,笔者简单…...

C++入门基础(2)

C入门基础&#xff08;2&#xff09; 1.缺省函数2.函数重载3.引用3.1 引用的概念和定义3.2 引用的特性3.3 引用的使用3.3.1引用的特性 4 .const引用5. 指针和引用的关系6.inline 1.缺省函数 • 缺省参数是声明或定义函数时为函数的参数指定⼀个缺省值。在调用该函数时&#xf…...

芋道框架万字详解(前后端分离)、若依框架、yudao-cloud保姆级攻略

♥️作者&#xff1a;小宋1021 &#x1f935;‍♂️个人主页&#xff1a;小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识&#xff0c;和大家一起努力呀&#xff01;&#xff01;&#xff01; &#x1f388;&#x1f388;加油&#xff01; 加油&#xff01…...

Java程序打印日志

一、maven依赖 POM文件中添加以下依赖&#xff0c;maven依赖的jar包版本可以在maven central repository 查看 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.34</version><…...

深入理解C++ 中的可调⽤对象

C中的可调⽤对象总结 普通函数类成员函数类静态成员函数与类成员函数的区别 仿函数简单示例高级用法-状态保持优缺点优点缺点 函数指针获取函数地址声明并调用函数指针 lambda表达式语法定义捕获单个捕获符 std::function()协程 可调用对象用处⼴泛&#xff1a; ⽐如在使⽤⼀些…...

汇编程序调用 C 程序详解

文章目录 1. ATPCS 规则 2. 汇编和C程序传递参数 汇编程序向 C 程序的函数传递参数 C 程序返回结果给汇编程序 代码示例 3. C 函数使用栈 4. C 语言中读写寄存器 在嵌入式开发中&#xff0c;经常需要在 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 快捷键不搭杆&#xff0c;但常用】基础快捷键扩展快捷键 前言 Coder 苦鼠标久已&#xff0c;整理汇总 Windows 快捷键包括一些常用的快捷键&#xff0c;比如“浏览器”相关的快捷键内容分为四小节&…...

微服务有哪些组件?

1.注册中心&#xff1a;用于服务的注册和发现&#xff0c;管理微服务的地址 Nacos&#xff0c;Eureka 2.配置中心&#xff1a;集中管理微服务的配置中心 Nacos config 3.远程调用&#xff1a;用于不同微服务间的通信和协作 RESTful API&#xff08;RestTemplate&#xff0…...

camera-qsc-crosstalk校准数据XTALK回写

问题背景 手机越做越紧凑&#xff0c;需要模组和芯片尺寸越做越小&#xff0c;在尺寸一定的基础上&#xff0c;高像素和大像素&#xff0c;对于手机摄像头来说&#xff0c;一直是一对矛盾的存在。 高像素&#xff1a;带来高分辨率画质大像素&#xff1a;带来暗态下高感光度和…...

混合贪心算法求解地铁线路调度

一、问题描述 城市轨道交通的繁荣发展&#xff0c;带来了车辆资源需求的日益增加。如何兼顾运营服务水平和运营成本&#xff0c;以最少的车底优质地完成运输任务成为一大严峻问题。本题在后续的描述中将由多辆动车和拖车组合而成的车组称为车底。在日常的运营组织中&#xff0…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...