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

splitchunk（如何将指定文件从主包拆分为单独的js文件）

news 来源：原创 2025/6/7 14:29:05

1. 说明

webpack打包会默认将入口文件引入依赖js打包为一个入口文件，导致这个文件会比较大，页面首次加载时造成加载时间较长
可通过splitchunk配置相应的规则，对匹配的规则打包为单独的js,减小入口js的体积

2. 示例

通过正则匹配，会把入口中引入的c.js打包为单独c.js

webpack.config.js

const path = require('path');
module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, 'dist1'),publicPath: "/dist1/",},optimization: {minimize: false,splitChunks: {minSize: 0,cacheGroups: {cJs: {test: /c\.js$/,  // 通过正则匹配，会把入口中引入的c.js打包为单独c.js,在html里也需引入c.jsname: 'c',chunks: 'all',priority: 10 // 设置较高的优先级}}}}
}

index.js

import a from './a.js'
import './cc/c.js'
import './c.js'a()

a.js

const testArrowFuntion = () => {console.log('this is testArrowFuntion')
}const aSignFuntion = () => {testArrowFuntion()console.log('this is a')
}export default aSignFuntion

cc/c.js

const getUuid = (len, radix) => {var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')var uuid = []var iradix = radix || chars.lengthif (len) {for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]} else {var ruuid[8] = uuid[13] = uuid[18] = uuid[23] = ''uuid[14] = '4'for (i = 0; i < 36; i++) {if (!uuid[i]) {r = 0 | Math.random() * 16uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]}}}return uuid.join('')
}export {getUuid
}

c.js

console.log('This is c.js');
window.sunlight = 'ght'

3. 结果展示

大包会生成 mains.js、c.js 两个文件正常不配置splitchunk情况只会生成一个main.js
main.js中只包含了a.js代码
c.js 文件包含了 cc/c.js、c.js 两部分的代码

在这里插入图片描述
【注】
页面里需要把main.js和c.js都引入

4. main.js里是如何加载 c.js 里的代码的呢

mainx.js 会对window[“webpackJsonp”].push进行劫持，在c.js里调用window[“webpackJsonp”].push时，会触发main.js里的webpackJsonpCallback 回调函数
webpackJsonpCallback 函数里会将依赖的代码获取到，并用对应chunkId关联对应的模块代码

在这里插入图片描述

c.js 会默认调用window[“webpackJsonp”] || []).push 添加对应的模块代码

splitchunk（如何将指定文件从主包拆分为单独的js文件）

1. 说明 webpack打包会默认将入口文件引入依赖js打包为一个入口文件，导致这个文件会比较大，页面首次加载时造成加载时间较长可通过splitchunk配置相应的规则，对匹配的规则打包为单独的js,减小入口js的体积 2. 示例通过正则匹配&#xff…...

编程日记 2025/5/4 7:27:50

MCP+A2A协议终极指南：AI系统构建技术全解析（医疗/金融实战+Streamable HTTP代码详解）

简介 2025年，MCP协议与A2A协议成为AI系统互联的核心技术。本文从通信机制到企业级应用，结合Streamable HTTP、零信任安全、多模态处理等最新技术，提供Go/Python/Java多语言实战代码，覆盖医疗诊断、金融风控等场景。含15+完整案例、性能优化方案及安全架构设计，助你掌握下…...

编程日记 2025/5/4 11:14:25

关于定时任务原理

关于定时任务原理计算机是怎么计时的关于本地定时任务实现小根堆实现时间轮实现关于分布式任务的实现管理未来的执行时间点今天来聊一下工作中经常使用的定时任务的底层实现原理计算机是怎么计时的计算机内部使用多种方式来计时，主要依赖于硬件时钟&#xff0…...

编程日记 2025/5/27 5:24:16

【vue3】购物车实战：从状态管理到用户体验的全流程实现

在电商项目中，购物车是核心功能之一，需要兼顾数据一致性、用户体验和逻辑复杂度。本文结合 Vue3 Pinia 技术栈，详细讲解如何实现一个高效且易用的购物车系统，重点剖析添加购物车和头部购物车预览的核心逻辑与实现细节。一…...

编程日记 2025/5/29 19:03:25

日本IT|UIUX主要的工作都是哪些？及职业前景

在日本IT行业中，UI/UX（用户界面/用户体验）设计的工作涵盖从用户研究到界面实现的全流程，尤其在数字化服务、电商、金融科技等领域需求旺盛。本篇是UI/UX在日本的主要工作内容、行业特点及职业前景分析： 一、UI/UX的主…...

编程日记 2025/5/27 6:14:10

Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（二）

基于上篇内容，继续完善企业官网页面： Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（一） 3.3 服务亮点：用于展示企业主要的服务项 1. 整体结构： <section class"py-16">&…...

编程日记 2025/5/31 8:56:12

第7章内部类与异常类

7.1 内部类在一个类中定义另一个类，这样的类称为内部类，包含内部类的类称为内部类的外部类。关系： 内部类的外嵌类的成员变量在内部类中仍然有效，内部类中的方法也可以调用外嵌类中的方法。内部类的类体中不可以声明类变量和…...

编程日记 2025/5/27 7:02:40

优先队列、堆笔记（算法第四版）

方法签名描述构造函数MaxPQ()创建一个优先队列MaxPQ(int max)创建一个初始容量为 max 的优先队列MaxPQ(Key[] a)用 a[] 中的元素创建一个优先队列普通方法void insert(Key v)向优先队列中插入一个元素Key max()返回最大元素Key delMax()删除并返回最大元素boolean isEmpty()返回…...

编程日记 2025/5/18 9:19:59

7.14 GitHub命令行工具测试实战：从参数解析到异常处理的全链路测试方案

GitHub命令行工具测试实战：从参数解析到异常处理的全链路测试方案 GitHub Sentinel Agent 用户界面设计与实现：测试命令行工具关键词：命令行工具测试, 接口集成测试, 参数化测试, 异常处理测试, 测试覆盖率分析 1. 命令行工具测试架构设计通过三层测试体系保障 CLI 工具…...

编程日记 2025/5/26 7:08:36

使用CubeMX新建USART1不定长接收工程

目录 1、新建板级支持包 2、修改中断服务函数 3、修改main.c文件 4、程序流程新建工程的基本操作步骤参考这里：STM32CubeMX学习笔记（6）——USART串口使用_unused(huart)-CSDN博客 1、新建板级支持包在本地保存新建工程的文件夹中新建Us…...

编程日记 2025/5/20 8:22:13

【C++QT】Layout 布局管理控件详解

文章目录一、QVBoxLayout 垂直布局1.1 特点1.2 常用方法1.3 应用场景1.4 示例代码二、QHBoxLayout 水平布局2.1 特点2.2 常用方法2.3 应用场景2.4 示例代码三、QGridLayout 网格布局3.1 特点3.2 常用方法3.3 应用场景3.4 示例代码四、QFormLayout 表单布局4.1 特点4.2 常用…...

编程日记 2025/5/25 17:00:34

w~嵌入式C语言~合集6

我自己的原文哦~ https://blog.51cto.com/whaosoft/13870384 一、开源MCU简易数字示波器项目这是一款采用STC8A8K MCU制造的简单示波器，只有零星组件，易于成型。这些功能可以涵盖简单的测量： 该作品主要的规格如下： 单片机…...

编程日记 2025/5/30 17:09:44

坐标转换：从WGS-84到国内坐标系(GCJ-02BD-09)

目录 🍅点击这里查看所有博文随着自己工作的进行，接触到的技术栈也越来越多。给我一个很直观的感受就是，某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了，只有经常会用到的东西才有可能真正记…...

编程日记 2025/5/7 8:52:14

快速上手 MetaGPT

1. MetaGPT 简介在当下的大模型应用开发领域，Agent 无疑是最炙手可热的方向，这也直接催生出了众多的 Agent 开发框架。在这之中， MetaGPT 是成熟度最高、使用最广泛的开发框架之一。 MetaGPT 是一款备受瞩目的多智能体开发框架&#xff0c…...

编程日记 2025/5/24 16:11:49

「Docker已死？」：基于Wasm容器的新型交付体系如何颠覆十二因素应用宣言

一、容器技术的量子跃迁 1. 传统容器体系的测不准原理某金融平台容器集群真实数据： 指标Docker容器Wasm容器差异度冷启动时间1200ms8ms150倍内存占用256MB6MB42倍镜像体积780MB12MB65倍内核调用次数2100次/s23次/s91倍二、Wasm容器的超流体特性 1. 字节码的量子…...

编程日记 2025/5/27 23:36:57

有源晶振输出匹配电阻选择与作用详解

一、输出匹配电阻的核心作用阻抗匹配减少信号反射：当信号传输线阻抗（Z0）与负载阻抗不匹配时，会发生反射，导致波形畸变（如振铃、过冲）。公式：反射系数Γ (Z_L - Z0) / (Z_L Z0)…...

编程日记 2025/6/4 13:11:53

Shell脚本-while循环应用案例

在Shell脚本编程中，while循环是一种非常有用的控制结构，适用于需要基于条件进行重复操作的场景。与for循环不同，while循环通常用于处理不确定次数的迭代或持续监控某些状态直到满足特定条件为止的任务。本文将通过几个实际的应用案例来展示如…...

编程日记 2025/5/29 15:58:31

【JavaScript】二十七、用户注册、登陆、登出

文章目录 1、案例：用户注册页面1.1 发送验证码1.2 验证用户名密码合法性1.3 已阅读并同意用户协议1.4 表单提交 2、案例：用户登陆页面2.1 tab切换2.2 登陆跳转2.3 登陆成功与登出 1、案例：用户注册页面 1.1 发送验证码需求：用户…...

编程日记 2025/5/27 8:27:52

Vue中Axios实战指南：高效网络请求的艺术

Axios作为Vue生态中最流行的HTTP客户端，以其简洁的API和强大的功能成为前后端交互的首选方案。本文将带你深入掌握Axios在Vue项目中的核心用法和高级技巧。一、基础配置 1. 安装与引入 npm install axios 2. 全局挂载（main.js） import …...

编程日记 2025/5/29 10:23:14

SAP-pp 怎么通过底表的手段查找BOM的全部ECN变更历史

表：ABOMITEMS，查询条件是MAST的STLNR （BOM清单） 如果要得到一个物料的详细ECN历史，怎么办？ 先在MAST表查找BOM清单，然后根据BOM清单在ABOMITEMS表里面查询组件，根据查询组件的结果…...

编程日记 2025/5/29 8:48:40

数据需求管理办法有哪些？具体应如何应用？

目录一、数据需求管理的定义二、数据需求管理面临的问题 1.需求理解偏差 2.需求变更频繁 3.需求优先级难以确定 4.数据质量与需求不匹配三、数据需求管理办法的具体流程 1.建立有效的沟通机制 2.规范需求变更管理流程 3.制定需求优先级评估标准 4.加强数据质量管…...

编程日记 2025/5/27 17:28:54

单片机 + 图像处理芯片 + TFT彩屏复选框控件

复选框控件使用说明一、控件概述本复选框控件是一个适用于单片机图形界面的UI组件，基于单片机 RA8889/RA6809 TFT显示屏 GT911触摸屏开发。控件提供了丰富的功能和自定义选项，使用简单方便，易于移植。主要特点： 支持可…...

编程日记 2025/5/1 23:06:29

塔能合作模式：解锁工厂能耗精准节能新路径

在工厂寻求能耗精准节能的道路上，除了先进的技术，合适的合作模式同样至关重要。塔能科技提供的能源合同管理（EMC）和交钥匙方式（EPC），为工厂节能项目的落地实施提供了有力支持，有效解…...

编程日记 2025/6/1 11:57:37

使用PHP对接印度股票市场数据

在本篇文章中，我们将介绍如何通过StockTV提供的API接口使用PHP语言来获取并处理印度股票市场的数据。我们将以查询公司信息、查看涨跌排行榜和实时接收数据为例，展示具体的操作流程。准备工作首先，请确保您已经从StockTV获得了API密钥&am…...

编程日记 2025/5/30 15:07:18

make学习三：书写规则

系列文章目录 Make学习一：make初探 Make学习二：makefile组成要素文章目录系列文章目录前言默认目标规则语法order-only prerequisites文件名中的通配符伪目标 Phony Targets没有 Prerequisites 和 recipe内建特殊目标名一个目标多条规则或多个目标共…...

编程日记 2025/5/28 8:12:10

Arduino 入门学习笔记（五）：KEY实验

Arduino 入门学习笔记（五）：KEY实验开发板：正点原子ESP32S3 例程源码在文章顶部可免费下载（审核中…） 1. GPIO 输入功能使用 1.1 GPIO 输入模式介绍在上一文章中提及到 pinMode 函数， 要对…...

编程日记 2025/5/28 17:57:24

Grok发布了Grok Studio 和 Workspaces两个强大的功能。该如何使用？如何使用Grok3 API？

最近Grok又更新了几个功能：Grok Studio 和 Workspaces。其中 Grok Studio 主要功能包括： 代码执行：在预览标签中运行 HTML 片段、Python、JavaScript 等。 Google Drive 集成：附加并处理 Docs、Sheets、Slides等文件。协作工…...

编程日记 2025/5/26 7:19:43

学习spark总结

一、Spark Core • 核心功能：基于内存计算的分布式计算框架，提供RDD弹性分布式数据集，支持转换（如map、filter）和动作（如collect、save）操作。 • 关键特性：高容错性（L…...

编程日记 2025/5/19 11:36:05

LeetCode 24 两两交换链表中的节点

给你一个链表，两两交换其中相邻的节点，并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题（即，只能进行节点交换）。示例 1： 输入：head [1,2,3,4] 输出：[2,1…...

编程日记 2025/5/27 16:24:52

Qt中的全局函数讲解集合(全)

目录 1.qAbs 2.qAsConst 3.qBound 4.qConstOverload 5.qEnvironmentVariable 6.qExchange 7.qFloatDistance 8.qInstallMessageHandler 在头文件<QtGlobal>中包含了Qt的全局函数，现在就这些全局函数一一详解。 1.qAbs 原型： template &…...

编程日记 2025/5/24 12:34:03

《明解C语言入门篇》读书笔记四

目录第四章：程序的循环控制第一节：do语句 do语句复合语句（程序块）中的声明读取一定范围内的值逻辑非运算符德摩根定律德摩根定律求多个整数的和及平均值复合赋值运算符后置递增运算符和后置递减运算符练习…...

编程日记 2025/5/9 12:14:15

【每日随笔】文化属性 ② ( 高维度信息处理 | 强者思维形成 | 认知重构 | 资源捕获 | 进化路径 )

文章目录一、高维度信息处理1、" 道 " - 高维度信息2、上士对待 " 道 " 的态度3、中士对待 " 道 " 的态度4、下士对待 " 道 " 的态度二、形成强者思维1、认知重构 : 质疑本能 -> 信任惯性2、资源捕获 : 远神崇拜 -> 近身模仿3…...

编程日记 2025/5/28 18:05:23

terraform查看资源建的关联关系

一、使用 terraform graph 命令生成依赖关系图该命令会生成资源间的依赖关系图（DOT 格式），需配合 Graphviz 工具可视化。 1. 安装 Graphviz # Ubuntu/Debian sudo apt-get install graphviz# MacOS brew install graphviz 2. 生成并查看…...

编程日记 2025/6/1 16:56:59

win11报错 ‘wmic‘ 不是内部或外部命令，也不是可运行的程序或批处理文件的解决方案

方法一：检查环境变量右键点击“此电脑”或“计算机”: 选择“属性”，然后点击“高级系统设置”。进入环境变量设置： 在“系统属性”窗口中，点击“环境变量”。检查Path变量： 在“系统变量”部分，找到并…...

编程日记 2025/6/2 0:49:18

监控易一体化运维：巡检管理，守护企业系统稳定的坚固防线

在数字化浪潮奔涌的当下，企业业务高度依赖信息技术系统，数据流量呈爆发式增长。从日常办公到核心业务运作，每一个环节都离不开稳定可靠的系统支持。在这种背景下，确保系统时刻处于最佳状态的重要性。而监控易的巡检管理功能&#…...

编程日记 2025/5/25 9:36:50

技能点总结

技能点总结 1、多线程导致事物失效的原因1.1 线程间竞争条件1.2 可见性问题1.3 原子性破坏1.4 死锁与活锁1.5 事务隔离级别问题1.5.1 脏读、不可重复读、幻读 1、多线程导致事物失效的原因多线程环境下事物失效是一个常见问题，主要原因包括以下几个方面&#xff1…...

编程日记 2025/5/29 12:17:20

23种设计模式-行为型模式之命令模式（Java版本）

Java 命令模式（Command Pattern）详解 🧠 什么是命令模式？ 命令模式是一种行为型设计模式，它将请求封装成一个对象，从而使你可以使用不同的请求、队列、日志请求以及支持可撤销的操作。命令模式将请求的…...

编程日记 2025/6/1 12:43:57

聊一聊接口测试的核心优势及价值

目录一、核心优势提前发现问题，降低修复成本高稳定性与维护效率全面覆盖复杂场景性能与安全测试的基石高度自动化与高效执行支持微服务与分布式架构二、核心价值加速交付周期及降低维护成本提升质量与用户体验增强安全性及促进团队间的协作 …...

编程日记 2025/5/29 14:09:19

大学之大：索邦大学2025.4.27

索邦大学：千年学术传承与现代创新的交响一、前身历史：从巴黎大学到现代索邦的千年脉络 1. 中世纪起源：欧洲学术之母的诞生索邦大学的历史可追溯至9世纪，其前身巴黎大学被誉为“欧洲大学之母”。1257年，神学家罗伯特…...

编程日记 2025/6/1 16:30:49

python文本合并脚本

做数据集本地化时，用到了文本txt合并问题，用了trae -cn ai辅助测试一下效果，还可以吧，但还是不如人灵光，反复的小错，如果与对成手，应该很简单，这里只做了测试吧，南无阿弥…...

编程日记 2025/5/7 15:11:59

Coding Practice，48天强训（25）

Topic 1：笨小猴(质数判断的几种优化方式，容器使用的取舍） 笨小猴__牛客网 #include <bits/stdc.h> using namespace std;bool isPrime(int n) {if(n < 1) return false;if(n < 3) return true; // 2和3是质数if(n % 2 0 …...

编程日记 2025/5/17 21:06:54

pytorch学习使用

1. 基础使用 1.1 基础信息 # 输出 torch 版本 print(torch.__version__)# 判断 cuda 是否可用 print(torch.cuda.is_available()) """ 2.7.0 False """1.2 创建tensor # 创建一个5*3的矩阵，初始值为0. print("-------- empty…...

编程日记 2025/6/4 17:22:12

《AI大模型应知应会100篇》第38篇：大模型与知识图谱结合的应用模式

第38篇：大模型与知识图谱结合的应用模式摘要随着大模型（如GPT、BERT等）和知识图谱技术的快速发展，两者的融合为构建更精准、可解释的智能系统提供了新的可能性。本文将深入探讨大模型与知识图谱的能力互补性、融合架构设计以及…...

编程日记 2025/5/16 10:15:56

TypeScript中的type

在 TypeScript 中，type 是一个非常重要的关键字，用于定义类型别名（Type Alias）。它允许你为一个类型创建一个新的名字，从而使代码更加简洁和可读。type 可以用来定义基本类型、联合类型、元组类型、对象类型等。以下是…...

编程日记 2025/5/22 17:53:16

数据库3，

describe dt drop table 删表 df delete from删行 usw update set where更新元素 iiv insert into values（）插入行 sf select from选行 select *选出所有行 （ob order by 排序由低到高 DESC由高到低 order by score&#…...

编程日记 2025/5/1 19:18:21

I-CON: A Unifying Framework for Representation Learning

1，本文关键词 I-Con框架、表征学习、KL散度、无监督分类、对比学习、聚类、降维、信息几何、监督学习、自监督学习、统一框架 2，术语表术语解释I-Con本文提出的统一表征学习方法，全称Information Contrastive Learning，通过最…...

编程日记 2025/5/29 19:00:09

mybatis首个创建相关步骤

1。先关联数据库，用户，密码，数据库保持一致 2.添加包和类 1.User放和数据库属性一样的 package com.it.springbootmybatis01.pojo;lombok.Data lombok.AllArgsConstructor lombok.NoArgsConstructor public class User {private Integer i…...

编程日记 2025/5/24 11:48:27

vue3子传父——v-model辅助值传递

title: 子组件向父组件传值 date: 2025-04-27 19:11:09 tags: vue3 vue3子传父——v-model辅助值传递一、子组件发出 1.步骤一创建emit对象这个对象使用的是defineEmits进行的创建，emit的中文意思又叫发出，你就把他当成一个发出数据的函数方法来用…...

编程日记 2025/5/26 22:20:49

Golang | 向倒排索引上添加删除文档

syntax "proto3";package types;message Keyword {string Field 1; // 属性/类型/名称string Word 2; // 关键词 }message Document {string Id 1; //业务使用的唯一Id，索引上此Id不会重复uint64 IntId 2; //倒排索引上使用的文档id(业务侧不用管这…...

编程日记 2025/5/26 5:49:29

秒杀系统 Kafka 架构进阶优化

文章目录前言1. Kafka Topic 分区（Partition）设计2. Kafka 消费者高可用部署（Consumer Scaling）3. Kafka Redis 多级限流降级设计4. 秒杀链路全链路追踪（Tracing）5. Kafka 死信队列（DLQ&#…...

编程日记 2025/5/8 4:48:19

1. 说明

2. 示例

3. 结果展示

4. main.js里是如何加载 c.js 里的代码的呢

相关文章：