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

大功告成啦~
完结,撒花

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习Python的IDE功能--(一)入门导览

项目视图是主要工具窗口之一。它包含项目目录、SDK 特定的外部库和临时文件。点击带条纹的按钮可以预览演示项目。您也可以按Alt1打开。点击以打开项目视图,展开项目目录以查看项目文件。双击以打开welcome.py。 切换到"学习"工具窗口继续学习本课次。…

ELK企业级日志分析

目 录 一、ELK简介 1.1 elasticsearch简介 1.2 logstash简介 1.3 kibana简介 1.4 ELK的好处 1.5 ELK的工作原理 二、部署ELK 2.1 部署elasticsearch(集群) 2.1.1 修改配置文件 2.1.2 修改系统参数 2.1.2.1 修改systemmd服务管理器 2.1.2.2 性能调优参数 2.1.2.3 …

文献阅读:tidyomics 生态系统:增强组学数据分析

文献介绍 文献题目: The tidyomics ecosystem: enhancing omic data analyses 研究团队: Stefano Mangiola(澳大利亚沃尔特和伊丽莎霍尔医学研究所)、Michael I. Love(美国北卡罗来纳大学教堂山分校)、Ant…

k8s集群新增节点

目前集群状态 如K8S 集群搭建中规划的集群一样 Masternode01node02IP192.168.100.100192.168.100.101192.168.100.102OSCent OS 7.9Cent OS 7.9Cent OS 7.9 目前打算新增节点node03 Masternode01node02node03IP192.168.100.100192.168.100.101192.168.100.102192.168.100.1…

Golang | Leetcode Golang题解之第240题搜索二维矩阵II

题目&#xff1a; 题解&#xff1a; func searchMatrix(matrix [][]int, target int) bool {m, n : len(matrix), len(matrix[0])x, y : 0, n-1for x < m && y > 0 {if matrix[x][y] target {return true}if matrix[x][y] > target {y--} else {x}}return f…

STM32 GPIO的工作原理

STM32的GPIO管脚有下面8种可能的配置:&#xff08;4输入 2 输出 2 复用输出) &#xff08;1&#xff09;浮空输入_IN_FLOATING 在上图上&#xff0c;阴影的部分处于不工作状态&#xff0c;尤其是下半部分的输出电路&#xff0c;实际上是与端口处于隔离状态。黄色的高亮部分显示…

C#统一委托Func与Action

C#在System命名空间下提供两个委托Action和Func&#xff0c;这两个委托最多提供16个参数&#xff0c;基本上可以满足所有自定义事件所需的委托类型。几乎所有的 事件 都可以使用这两个内置的委托Action和Func进行处理。 Action委托&#xff1a; Action定义提供0~16个参数&…

stm32入门-----初识stm32

目录 前言 ARM stm32 1.stm32家族 2.stm32的外设资源 3.命名规则 4.系统结构 5.引脚定义 6.启动配置 7.STM32F103C8T6芯片 8.STM32F103C8T6芯片原理图与最小系统电路 前言 已经很久没跟新了&#xff0c;上次发文的时候是好几个月之前了&#xff0c;现在我是想去学习st…

怎样减少视频的容量 怎样减少视频内存保持清晰度

在数字媒体时代&#xff0c;视频内容已经成为人们日常交流和信息传递的重要方式。然而&#xff0c;视频往往占用大量存储空间&#xff0c;给我们的设备带来不小的负担。如何在不损失视频质量的前提下&#xff0c;减少视频文件的大小呢&#xff1f;本文将为你揭秘几个实用的技巧…

定制开发AI智能名片商城微信小程序在私域流量池构建中的应用与策略

摘要 在数字经济蓬勃发展的今天&#xff0c;私域流量已成为企业竞争的新战场。定制开发AI智能名片商城微信小程序&#xff0c;作为私域流量池构建的创新工具&#xff0c;正以其独特的优势助力企业实现用户资源的深度挖掘与高效转化。本文深入探讨了定制开发AI智能名片商城微信…

数据结构(5.2_2)——二叉树的性质

常见考点1: 设非空二叉树中度为0、1和2的结点个数分别为n0、n1和n2&#xff0c;则n0n21(叶子结点比二分支结点多一个) 常见考点2&#xff1a; 二叉树第一层至多右 有个结点(i>1) m叉树第一层至多右 有个结点(i>1) 常见考点3&#xff1a; 高度为h的二叉树至多有个结点…

23年oppo提前批笔试真题-构造二阶行列式

构造二阶行列式 题目描述 小欧希望你构造一个二阶行列式&#xff0c;满足行列式中每个数均为不超过 20 的正整数&#xff0c;且行列式的值恰好等于x。你能帮帮她吗? 输入描述 一个正整数x。-1000 < x < 1000 输出描述 如果无解&#xff0c;请输出-1。否则输出任意合…

ELK日志管理与应用

目录 一.ELK收集nginx日志 二.收集tomcat日志 三.Filebeat 一.ELK收集nginx日志 1.搭建好ELKlogstashkibana架构 2.关闭防火墙和selinux systemctl stop firewalld setenforce 0 3.安装nginx [rootlocalhost ~]# yum install epel-release.noarch -y [rootlocalhost …

好用的AI搜索引擎

1. 360AI 搜索 访问 360AI 搜索: https://www.huntagi.com/sites/1706642948656.html 360AI 搜索介绍&#xff1a; 360AI 搜索&#xff0c;新一代智能答案引擎&#xff0c;值得信赖的智能搜索伙伴&#xff0c;为复杂搜索提供专业支持&#xff0c;解锁更相关、更全面的答案。AI…

Elasticsearch基础(三)

目录 1.DSL查询文档 1.1.DSL查询分类 1.2.全文检索查询 1.3.精准查询 1.4.地理坐标查询 1.5.复合查询 2.搜索结果处理 2.1.排序 2.2.分页 2.3.高亮 2.4.总结 3.RestClient查询文档 3.1.快速入门 3.2.match查询 3.3.精确查询 3.4.布尔查询 3.5.排序、分页 3.6.…

live555 rtsp服务器实战之doGetNextFrame

live555关于RTSP协议交互流程 live555的核心数据结构值之闭环双向链表 live555 rtsp服务器实战之createNewStreamSource live555 rtsp服务器实战之doGetNextFrame 注意&#xff1a;该篇文章可能有些绕&#xff0c;最好跟着文章追踪下源码&#xff0c;不了解源码可能就是天书…

多多OJ评测系统 前端项目环境初始化 安装Vue脚手架 引入Arco Design组件

目录 确定环境 命令行输入 装一下脚手架 监测一下是否安装成功 创建一个项目 选择一系列的配置后 我们打开webStorm 配置脚手架后我们先运行 我们这边能获取到网址 其实我们脚手架已经帮我们做到了 接下来要引入相关的组件 选择用npm进行安装 我们建议的是完整引入…

DETR算法解读——Transformer在目标检测任务的首次应用

论文&#xff1a;End-to-End Object Detection with Transformers 作者&#xff1a;Nicolas Carion, Francisco Massa, Gabriel Synnaeve, Nicolas Usunier, Alexander Kirillov, Sergey Zagoruyko 机构&#xff1a;Facebook AI 链接&#xff1a;https://arxiv.org/abs/2005.12…

【RabbitMQ】一文详解消息可靠性

目录&#xff1a; 1.前言 2.生产者 3.数据持久化 4.消费者 5.死信队列 1.前言 RabbitMQ 是一款高性能、高可靠性的消息中间件&#xff0c;广泛应用于分布式系统中。它允许系统中的各个模块进行异步通信&#xff0c;提供了高度的灵活性和可伸缩性。然而&#xff0c;这种通…

用adb指令把文件拷贝到Android模拟器

不解释太多&#xff0c;科学上网从youtube看了一个视频得来的 跳转到视频 首先必须要运行你要拷贝文件的目标Android模拟器&#xff0c;你关闭他的话&#xff0c;你是找不到这个设备的 管理员权限运行vs studio&#xff0c;在vs studio下打开Andriod的设备管理器 运行你要拷…