webpackd打包两次-生成两份代码-出现legacy的js文件

当我们build后dist文件中出现legacy的js文件。

原因:
pack.json文件;

{
*****"browserslist": ["> 0.03%","not dead"]
}
  • 当我们项目运行在古老的浏览器上面时(表示支持市场份额超过 > 0.03% 的浏览器版本),甚至在初始的webpack下都不满足旧版浏览器的兼容,webpack5为我们提供了browserslist配置来轻松构建较为健全的兼容Polyfills的转化。自动二次打包出兼容的文件代码。关于以上配置可查看往期文章 vue-cli5.0.x优雅降级,配置项目兼容旧版浏览器
  • 所以有了以上配置。但是更随而来的代价便是有了二次构建打包出兼容性更好的egacy的js文件其实最直观的感受就是打包的速度变慢了
  • 同时这也是vue-cli现代模式正常生产build下的产物vue-cli现代模式,可以通过改变构建命令来规避(跳过)这个为兼容而二次打包的过程。(不是最佳解决方案

在这里插入图片描述

在这里插入图片描述


解决方案

一 、反正就是为了兼容的不要把browserslist配置的太离谱即可

"dependencies" : {},
"devDependencies": {},
"browserslist": ["> 1%","last 2 versions","not dead","not ie 11"
]

二、手动规避:不需要 type=“module”
2.1 可以yarn build --no-module
yarn build --no-module说明打包之后,不生成<script type="module">

npx vue-cli-service help build可以查看 build 后面可添加的指令

Usage: vue-cli-service build [options] [entry|pattern]Options:--mode         specify env mode (default: production)--dest         specify output directory (default: dist)--no-module    build app without generating <script type="module"> chunks for modern browsers--target       app | lib | wc | wc-async (default: app)--inline-vue   include the Vue module in the final bundle of library or web component target--formats      list of output formats for library builds (default: commonjs,umd,umd-min)--name         name for lib or web-component mode (default: "name" in package.json or entry filename)--filename     file name for output, only usable for 'lib' target (default: value of --name)--no-clean     do not remove the dist directory contents before building the project  --report       generate report.html to help analyze bundle content--report-json  generate report.json to help analyze bundle content--skip-plugins comma-separated list of plugin names to skip for this run--watch        watch for changes--stdin        close when stdin ends
使用:vue-cli-service build [options] [entry|pattern]选项:——mode指定env模式(默认为production)
——dest指定输出目录(默认:dist)
——no-module不生成&lt;script type="module"&gt;现代浏览器的块
——target app | lib | wc | wc-async(默认:app)
——inline-vue将Vue模块包含在库或web组件目标的最终包中
——格式化库构建的输出格式列表(默认:commonjs,umd,umd-min)
——name lib或web组件模式的名称(默认:package. name)。Json或条目文件名)
——filename用于输出的文件名,仅用于'lib'目标(默认:——name的值)
——no-clean在构建项目之前不要删除dist目录的内容
生成report.html来帮助分析包的内容
——report-json生成报告Json来帮助分析包的内容
——skip-plugins用逗号分隔的要跳过的插件名称列表
——注意观察变化
——stdin结束时关闭

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

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

相关文章

nginx+keepalived 高可用项目实战

1. 概念 keepalived是什么 keepalived是集群管理中保证集群高可用的一个服务软件&#xff0c;用来防止单点故障。 keepalived工作原理 keepalived是以VRRP协议为实现基础的&#xff0c;VRRP全称Virtual Router Redundancy Protocol&#xff0c;即虚拟路由冗余协议。 …

java 中使用 锁的含义、使用方式场景及锁之间的区别与联系,缺点与优点

学习目标&#xff1a; 目标 了解 java 中使用 锁 的含义、使用方式场景及锁之间的区别与联系&#xff0c;缺点与优点。 学习内容&#xff1a; 内容 在 Java 中&#xff0c;锁是一种并发编程中控制多个线程对共享资源访问的机制。 锁的主要作用&#xff1a; 确保在同一时刻只…

序列化及方式对比分析

什么是序列化和反序列化? 如果需要持久化Java对象比如将Java对象保存在文件中, 或在网络传输Java对象, 这些场景需要使用到序列化. 序列化 将数据结构或对象转化成二进制字节流的过程 反序列化 将在序列化过程中所产生的二进制字节流转换成数据结构或者对象的过程 目的 …

PPSSPPSDL for Mac v1.17.1 PSP游戏模拟器(附500款游戏) 激活版

PPSSPPSDL for Mac是一款模拟器软件&#xff0c;它允许用户在Mac上运行PSP&#xff08;PlayStation Portable&#xff09;游戏。通过这款模拟器&#xff0c;用户可以体验到高清甚至更高的分辨率的游戏画面&#xff0c;同时还能够升级纹理以提升清晰度&#xff0c;并启用后处理着…

1.mysql--常用sql(2)

20、条件查询 (1)条件表达式&#xff1a;< &#xff0c; > &#xff0c;&#xff0c; !&#xff0c;<> (2)逻辑运算符:&& &#xff0c;||&#xff0c; ! &#xff0c; and &#xff0c;or&#xff0c; not (3)模糊查询&#xff1a;like between and,in,…

vite和webpacke的常规配置

文章目录 1、vite和webpacke的区分2、vite的常规配置介绍主要部分介绍vite基本配置示例 3、webpacke的常规配置介绍主要部分介绍Webpack 基本配置示例 1、vite和webpacke的区分 相同点&#xff1a; 都是构建工具&#xff0c;用于资源打包 &#xff1b; 都有应用到摇树原理 tre…

[Diffusion Model 笔记]DDIM 笔记 数学推导 Denoising Diffusion Implicit Models

目录 核心总结符号定义第一套&#xff0c;快速简单讲清采样方法继续分析&#xff0c;待定系数法求解图示理解关于参数sigma 本文是观看以下视频的笔记&#xff0c;强烈推荐观看最后的图示理解&#xff1a; https://www.bilibili.com/video/BV13P411J7dm/?spm_id_from333.788 论…

sqlserver创建login、user并授予相应数据库的权限

create login login1 with password111111 --创建一个login&#xff0c;用于登录 go use [BookDB] --在数据库[BookDB]上创建用户user1&#xff0c;拥有下面三个权限 go create user user1 for login login1 with default_schemadbo go exec sp_addrolemember db_ddladmin,…

路由重分布的概念与配置

路由重分布的概念 l 路由重分布是指连接不同路由域&#xff08;自治系统&#xff09;的边界路由器&#xff0c;它在路由协议之间交换和通告路由信息 从一种协议&#xff08;含静态/直连路由&#xff09;到另一种协议 同一种协议的多个实例 路由重分布的背景 网络出口位置…

时间序列预测:基于PyTorch框架的循环神经网络(RNN)实现销量预测

之前随手一写&#xff0c;没想到做预测的同学还挺多&#xff0c;但是之前那个效果并不好&#xff0c;于是在之前的基础上重新修改完善&#xff0c;到了现在这一步才感觉预测算是初步能应用。 上文地址&#xff1a;LSTM模型预测时间序列&#xff1a;根据历史销量数据预测商品未…

AI预测福彩3D第9套算法实战化测试第4弹2024年4月26日第4次测试

今天继续进行新算法的测试&#xff0c;今天是第4次测试。好了&#xff0c;废话不多说了&#xff0c;直接上图上结果。 2024年4月26日福彩3D预测结果 6码定位方案如下&#xff1a; 百位&#xff1a;4、5、7、8、3、9 十位&#xff1a;6、9、5、4、1、2 个位&#xff1a;7、8、5、…

Rust 网络编程之 gRPC 与 Tonic 框架

介绍 gRPC gRPC 是由 google 开发,是一款语言中立、平台中立、开源的远程过程调用 (RPC) 系统。通过 gRPC,客户端应用可以像调用本地对象一样直接调用另一台不同的机器上服务端应用的方法,能够让用户更容易地创建分布式应用和服务。 gRPC 基本原理为:定义一个服务,指定…

光明的未来:光分路器在现代通信中的角色

光分路器又叫分光器&#xff0c;是一种集成波导光功率分配器件&#xff0c;作用是实现光信号的分路。例如&#xff0c;一个1x4光分路器可以将一路输入光信号等比分成四路输出光信号&#xff0c;并在四个不同的通道内进行传输。如今&#xff0c;光分路器广泛应用在无源光网络&am…

mvvm 和mvc模式的区别

MVVM和MVC模式的区别主要体现在以下几个方面&#xff1a; 数据绑定方式&#xff1a;MVVM模式实现的是双向数据绑定&#xff0c;即当模型&#xff08;Model&#xff09;的数据发生变化时&#xff0c;视图&#xff08;View&#xff09;会自动更新&#xff1b;反之&#xff0c;当…

从 RAG 1.0到RAG 2.0,这次做对了什么?

RAG是目前最流行的补充生成式人工智能模型的方式&#xff0c;最近 RAG 的开创者提出了新的上下文语言模型 (CLM) &#xff0c;他们称之为“ RAG 2.0 ”。 今天让我们一块来从RAG目前的原理和缺点出发&#xff0c;看看他们所提出的RAG2.0是否能够为行业带来新的希望。 LLM的时间…

提交链码-编辑前后端,调用链码功能

一 . 链码介绍 1.什么链码&#xff1f; • 链码是一段用 Go、Node.js 或者 Java 实现了规定接口的程序。链码在安全的Docker容器中运行&#xff0c; 与背书节点的进程隔离。通过应用程序提交的交易&#xff0c;链码初始化和管理账本状态。• 链码通常处理网络成员协商达成的业…

若依文件下载

后端自带工具controller package com.ruoyi.web.controller.common;import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.slf4j.Logger; import org.slf4j.Logger…

docker常用基本命令

把jar包和 dockerfile文件放到同一目录下#构建Docker镜像 注意后面的 . 不能省略 docker build -t your-image-name .#运行并创建一个容器 docker run -d -p 8080:8080 --name container_name your-image-name# 停止容器 767fce4cb990 容器ID (容器名也可以) docker stop 767f…

HarmonyOS开发案例:【rating组件】

介绍 将引导开发者使用rating组件实现星级打分功能。 相关概念 [rating组件]&#xff1a;评分条&#xff0c;可根据用户判断进行打分。 环境搭建 软件要求 [DevEco Studio]版本&#xff1a;DevEco Studio 3.1 Release及以上版本。OpenHarmony SDK版本&#xff1a;API vers…

sCrypt全新上线RUNES功能

sCrypt智能合约平台全新上线一键etch/mint RUNES功能&#xff01; 请访问 https://runes.scrypt.io/ 或点击阅读原文体验&#xff01; 关于sCrypt sCrypt是BSV区块链上的一种智能合约高级语言。比特币使用基于堆栈的Script语言来支持智能合约&#xff0c;但是用原生Script编…