前端 JS 经典:Vite 分包配置

前言:在 Vite 项目中使用 npm run build 直接打包,打包后所有的静态文件都在 assets 文件中,js、css、图片等都放在一起看着很不舒服。我们可以通过配置 vite.config.js 来进行分包处理。打包机制底层是使用的 roolup,可以参考 rollup 官网。

vite.config.js 分包配置如下,备注写明字段用途,其中 [name] 、[hash] 、[ext] 是 rollup 中的展位符。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";export default defineConfig({plugins: [vue()],build: {// 配置 rollup 选项rollupOptions: {// 影响打包输出结果output: {// 入口 js 文件entryFileNames: "js/[name]-[hash].js",// 影响分包结果chunkFileNames: "js/[name]-[hash].js",// 除了 js 的其他文件assetFileNames(assetInfo) {if (assetInfo.name.endsWith(".css")) {return "css/[name]-[hash].css";}const imgExts = [".png",".jpg",".jpeg",".webp",".svg",".gif",".icon",];if (imgExts.some((ext) => assetInfo.name.endsWith(ext))) {return "imgs/[name]-[hash][ext]";}return "assets/[name]-[hash].[ext]";},},},},
});

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

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

相关文章

@arco.design upload 已上传文件,点击删除 popconfirm 询问删除

实现 借助 upload 的 两个属性 on-before-remove 和 custom-icon custom-icon 官方给的例子是更换图标,这里借助 h 函数返回的 vnode const getCustomIcon () > {return {retryIcon: () > h(IconUpload),cancelIcon: () > h(IconClose),fileIcon: () …

四十五、openlayers官网示例Icon modification解析——在地图上添加标记图形并随意移动它的位置

官网demo地址: Icon modification 这篇讲了如何随意移动地图上的矢量点。 先在地图上添加一个矢量点,其中anchorXUnits 和 anchorYUnits: 指定锚点的单位。fraction 表示相对于图标的宽度(0到1之间),pixels 表示以像素…

kotlin runBlocking launch withContext async 使用

在 Kotlin 协程(Coroutines)中,runBlocking、launch、withContext 和 async 是不同的函数和概念,用于处理异步和并发操作。下面我将逐个解释它们的使用方法和区别,并给出示例。 1. runBlocking runBlocking 是在非协…

政安晨【零基础玩转各类开源AI项目】解析开源:Stable Diffusion 3 论文及用户界面工具 StableSwarmUI

目录 关键成果 性能 结构细节 通过重新配重改善整形流量 比例整形变换模型 灵活的文本编码器 使用模型:StableSwarmUI 开源项目的现状: 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: 零基础玩转各类开源AI…

适配器模式(设计模式)

适配器模式主要在于将一个接口转变成另一个接口,它的目的是通过改变接口来达到重复使用的目的; 适配器模式(Adapter Pattern)是一种结构型设计模式,它允许接口不兼容的对象能够相互合作。适配器模式通过将一个类的接口…

Vulnhub-DC-9

靶机IP:192.168.20.144 kaliIP:192.168.20.128 网络有问题的可以看下搭建Vulnhub靶机网络问题(获取不到IP) 信息收集 nmap扫描一下端口及版本号 dirsearch扫目录 最后去前端界面观察发现也没什么隐藏路径。 观察功能,search引起注意,SQL注入测试 当输…

4机器学习期末复习

在机器学习中,数据清洗与转换包括哪些内容? 对数据进行初步的预处理,需要将其转换为一种适合机器学习模型的表示形式对许多模型类型来说,这种表示就是包含数值数据的向量或者矩阵: 1)将类别数据编码成为对…

select简单查询

SELECT 简单查询 假如我们有一张表,表名为 students,如下所示: --------------------------------- | id | name | age | department_id | --------------------------------- | 1 | 张三 | 20 | 101 | | 2 | Alice | …

IT入门知识博客文章大纲(0/10)

IT入门知识博客文章大纲 引言 什么是IT? 信息技术(Information Technology),互联网技术是指在计算机技术的基础上开发建立的一种信息技术 。互联网技术通过计算机网络的广域网使不同的设备相互连接,加快信息的传输速度…

如何在 Go 应用程序中使用检索增强生成(RAG)

本文将帮助大家实现 RAG (使用 LangChain 和 PostgreSQL )以提高 LLM 输出的准确性和相关性。 得益于强大的机器学习模型(特别是由托管平台/服务通过 API 调用公开的大型语言模型,如 Claude 的 LLama 2等)&#xff0c…

「动态规划」买卖股票的最佳时机,如何处理多笔交易?

188. 买卖股票的最佳时机 IVhttps://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iv/description/ 给你一个整数数组prices和一个整数k,其中prices[i]是某支给定的股票在第i天的价格。设计一个算法来计算你所能获取的最大利润。你最多可以完成k笔交易。…

关于钽电容器的作用、优缺点、选型指南及故障诊断方法等介绍

钽电容器,全称为钽电解电容器,是一种以金属钽作为介质材料的电解电容器。与传统的电解电容器不同,钽电容器不使用液体电解质,而是利用钽氧化物(五氧化二钽)作为固态电解质,这使得它们具有更高的…

取证工作: SysTools SQL Log Analyzer, 完整的 SQL Server 日志取证分析

天津鸿萌科贸发展有限公司是 Systools 系列软件的授权代理商。 SysTools SQL Log Analyzer 是 Systools 取证工具系列之一,用于调查 SQL Server 事务日志,以对数据库篡改进行取证分析。 什么是 SQL Server 事务日志? 在深入研究 SQL 事务日…

Python 测试用例

在Python中编写测试用例通常使用unittest模块,这是Python标准库的一部分,专门用于编写和运行测试。下面是一个简单的测试用例的例子,展示了如何使用unittest模块来测试一个函数。 假设我们有一个简单的函数,用于计算两个数的和&a…

Java HttpUtil 异步不等待调用

步骤一&#xff1a;添加依赖 <dependencies><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.6.3</version></dependency> </dependencies>步骤二&#xff1a;创建异步…

在Qt中,QSerialPort::write(data) 和 readAll() 有什么关联和联系

在Qt中&#xff0c;QSerialPort::write(data) 和 readAll() 是与串行通信相关的两个不同的函数&#xff0c;它们属于 QSerialPort 类。这两个函数在串行通信中扮演不同的角色&#xff0c;但它们之间存在一定的联系&#xff1a; QSerialPort::write(data) 这个函数用于将数据发…

失眠焦虑?这些小妙招助你重拾宁静之夜

在这个快节奏的时代&#xff0c;失眠与焦虑似乎成了不少人的“常客”。每当夜幕降临&#xff0c;躺在床上却辗转反侧&#xff0c;思绪万千&#xff0c;仿佛整个世界的喧嚣都涌入了脑海。&#x1f4ad; 其实&#xff0c;放松心情&#xff0c;调整心态&#xff0c;是缓解失眠焦虑…

Java | Leetcode Java题解之第151题反转字符串中的单词

题目&#xff1a; 题解&#xff1a; class Solution {public String reverseWords(String s) {StringBuilder sb trimSpaces(s);// 翻转字符串reverse(sb, 0, sb.length() - 1);// 翻转每个单词reverseEachWord(sb);return sb.toString();}public StringBuilder trimSpaces(S…

flask基础知识1

目录 1.介绍 2.体验一下 3.配置参数&#xff1a; 4.路由和URL 1.路由 2.动态路由&#xff1a; 自定义转换器&#xff1a; 3.使用自定义转换器 5.url_for函数 6.request参数 7.处理响应&#xff1a; 1.重定向&#xff1a; 2.返回json数据&#xff1a; 3.返回模板&…

el-table 多选回显,分页回显

实现el-table多选分页回显功能&#xff0c;左侧是分页的数据源&#xff0c;右侧是选择后的人员数据&#xff0c;切换下一页&#xff0c;选中的数据会在左侧表格回显。 实现&#xff1a; <template><el-dialog :title"title" :visible.sync"show"…