项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包,从而减少首屏加载时间

问题描述

我们项目做完,验收通过以后,就需要打包发布上线啦。于是我们执行命令:npm run build打dist包,打包完以后截图如下:

直接打包的chunk-vendors.js太大了

chunk-vendors.js文件太大了,所以我们需要将其优化一下,拆分一下

chunk-vendors.js是啥

chunk-vendors.js,顾名思义chunk(块/包)-vendors(供应商),即为:不是自己写的模块包,也就是/node_modules项目目录的所有模块包。所以这个chunk-vendors.js文件大的原因其实就是,我们把第三方的包都打包在这一个文件上了,都糅在一块,肯定大啊,所以想办法把其做一个拆分。

使用optimization.splitChunks做分包

这样的话,我们就把 chunk-vendors.js文件由,原来的824kB拆分成一个个几十KB的包文件了,这样的话,生产环境加载的时候,就会快一些

splitChunks分包代码

我们以vue为例,在vue.config.js文件中加入以下代码。代码大家直接复制粘贴即可使用,也是笔者自己在生产环境中使用的哦。

configureWebpack: config => {if (process.env.NODE_ENV !== 'production') returnreturn {plugins: [// ......],// 看这里:把chunk-vendors.js进行分包,提升资源加载速度,很有必要optimization: {/*** runtimeChunk可选值有:true或'multiple'或'single'* true或'multiple'会有每个入口对应的chunk。不过一般情况下* 考虑到要模块初始化,设置为single就够多数情况下使用啦。* 详情见官网:https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk* */runtimeChunk: 'single',/*** 以前是CommonsChunkPlugin,现在换成optimization.splitChunks。普通项目下方的配置就足够用啦* 详情见官网:https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks* */splitChunks: {chunks: 'all', // 可选值:all,async 和 initial。all功能最强大,所以咱们就使用allmaxInitialRequests: Infinity, // 最大并行请求数,为了以防万一,设置无穷大即可minSize: 20000, // 引入的模块大于20kb才做代码分割,官方默认20000,这里不用修改了maxSize: 60000, // 若引入的模块大于60kb,则告诉webpack尝试再进行拆分cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块priority: -10, // 优先级值越大优先级越高,默认-10,不用修改name(module) { // 设定分包以后的文件模块名字,按照包名字替换拼接一下const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]return `npm.${packageName.replace('@', '')}`},},},}}}},

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

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

相关文章

软件测试基础知识

软件测试基础 一、软件测试质量 软件研发过程中,通常定义了2个软件质量相关的角色: QC就是测试人员,职责是尽可能早地发现软件的缺陷,并确保缺陷得到修复QA是流程的监督者,职责是创建和执行 改进软件开发过程&#x…

STARTRADER星迈:银和铜的未来前景,是否即将迎来历史新高?

随着全球经济的复苏和技术进步的加速,大宗商品市场特别是金属市场近年来表现出强劲的动态。2024年,包括白银和铜在内的大宗商品价格已连续创下多年和历史新高,被分析师誉为可能是大宗商品交易史上赚钱的一年。本文将STARTRADER外汇深入探讨白…

Chromium 开发指南2024 Mac篇-编译前的准备工作(一)

1.引言 Chromium 是一款开源的网页浏览器项目,作为 Google Chrome 浏览器的基础,其卓越的性能和广泛的应用使其成为众多开发者研究和学习的对象。对于希望深入了解浏览器内核,或是计划在 Chromium 基础上开发自定义浏览器的开发者来说&#…

在Tomcat中部署war包

1、准备war包 确保已经有一个有效的war包,该war包包含了web应用程序的所有内容; 2、停止tomcat服务器 在部署之前,确保tomcat服务器已经停止,进入tomcat的配置目录执行命令:[路径]/tomcat/conf; 在Linux…

EXCEL表格怎么批量删除日期后的时间?

竞价师最近有点忙了,因为百度新出来一个“线索有效性诊断”功能 一、下载电话、表单、咨询表格 二、选中整列 三、选中ctrlf 进行替换,日期输入空格,时间输入*,替换为空即可! 四、整列单元格格式“日期”拉倒底部&…

线上OOM问题排查总结

自己搭建了一个小博客,该文章与博客文章同步。 一般情况下,出现OOM主要有一下三种原因。 一次性申请对象的太多。更改申请对象数量。内存资源耗尽未释放。找到未释放的对象进行释放。本身资源不够。jmap -heap 查看堆信息。 分几种情况解决&#xff1…

css文字镂空加描边

css文字镂空加描边 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>文字镂空</title><style>/* 公用样式 */html,body{width: 100%;height: 100%;position: relative;}/* html{overflow-y: scroll;} */*{margi…

C# 中的 StreamReader 和 StreamWriter 类

在这里插入代码片StreamReader 和 StreamWriter 位于 System.IO 命名空间中。当您想要读取或写入基于字符的数据时&#xff0c;这两个类都很有用。这两个类都处理 Unicode 字符。 StreamReader 派生自抽象类“TextReader”&#xff0c;StreamWriter 派生自“TextWriter”。 下…

爆火的儿童绘本如何用AI制作?一文解锁从制作到变现的全流程!

大家好我是安琪&#xff01; AI绘图发展势头如此猛烈&#xff0c;无论是Stable Diffusion&#xff0c;Midjourney&#xff0c;还是国内百度的文心一格&#xff0c;字节的豆包等&#xff0c;AI绘图技术越来越成熟&#xff0c;风格也越来越多样化。那么问题来了&#xff0c;对于普…

Linux企业 集群批量管理-秘钥认证

集群批量管理-秘钥认证 概述 管理更加轻松&#xff1a;两个节点&#xff0c;通过秘钥认证形成进行访问&#xff0c;不需要输入密码&#xff0c;单向服务要求&#xff08;应用场景&#xff09;&#xff1a; 一些服务在使用前要求我们做秘钥认证 手动写批量管理脚本名字&#x…

MySQL锁、加锁机制(超详细)—— 锁分类、全局锁、共享锁、排他锁;表锁、元数据锁、意向锁;行锁、间隙锁、临键锁;乐观锁、悲观锁

文章目录 一、概述1.1 MySQL锁的由来1.2 锁定义1.3 锁分类 二、共享锁与排他锁2.1 共享锁&#xff08;S锁&#xff09;2.2 排他锁&#xff08;X锁&#xff09;2.3 MySQL锁的释放 三、全局锁3.1 介绍3.2 语法3.3 特点 四、表级锁4.1 介绍4.2 表锁4.3 元数据锁&#xff08;Meta D…

auto_undercoat:可编辑 PSD 自动上色工具

现有的自动上色和 AI 上色只能输出单图&#xff0c;想要优化或微调的话很不方便&#xff0c;auto_undercoat 实现了通过提示词上色后&#xff0c;可以生成一个 PSD 文件在 PhotoShop 中继续编辑&#xff0c;大大提升了 AI 上色可用性&#xff01;

【路由交换技术】Cisco Packet Tracer基础入门教程(四)

Hello各位&#xff0c;好久不见&#xff0c;第四期我准备讲一下Packet Tracer中DHCP的配置&#xff0c;使用方法。 本章实验我们将拓扑中的某个路由器作为DHCP服务器&#xff08;它仍然可作为路由器使用&#xff09;&#xff0c;通过命令配置DHCP服务。独立的服务器可通过图形化…

【2024.6.23】今日科技时事:科技前沿大事件

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

麦肯锡:量子传感究竟在何处可以发光发热

量子传感技术已经提供价值&#xff0c;潜在的应用案例可以塑造多个行业。有四种核心技术具有应用前景&#xff1a;固态自旋、中性原子、超导电路和离子阱&#xff0c;它们具有在广泛的物理属性上的传感能力&#xff0c;包括磁场、电场、旋转、温度、重力、时间和压力。选择哪种…

人脸处理——人脸换脸基础算法探索与应用测试指南

人工智能&#xff08;AI&#xff09;彻底改变了我们生活的许多方面&#xff0c;而这项技术的应用之一就是AI换脸工具。这些工具使用先进的计算机视觉技术和深度学习算法&#xff0c;例如生成对抗网络 (GAN)&#xff0c;在照片或视频中将一个人的脸与另一个人的脸交换。 1. Dee…

HarmonyOS Next开发学习手册——ExtensionAbility

概述 EmbeddedUIExtensionAbility 是EMBEDDED_UI类型的ExtensionAbility组件&#xff0c;提供了跨进程界面嵌入的能力。 EmbeddedUIExtensionAbility需要和 EmbeddedComponent 一起配合使用&#xff0c;开发者可以在UIAbility的页面中通过EmbeddedComponent嵌入本应用的Embed…

短信平台是否支持接收回复信息?详细解答与操作指南

在数字化营销的浪潮中&#xff0c;短信平台成为商家和企业与客户沟通的重要桥梁。当涉及到客户反馈或交互时&#xff0c;很多商家和企业都会关心一个问题&#xff1a;短信平台是否支持接收回复信息&#xff1f;接下来&#xff0c;我们将详细解答这一问题&#xff0c;并提供操作…

如何在linux中下载R或者更新R

一、问题阐述 package ‘Seurat’ was built under R version 4.3.3Loading required package: SeuratObject Error: This is R 4.0.4, package ‘SeuratObject’ needs > 4.1.0 当你在rstudio中出现这样的报错时&#xff0c;意味着你需要更新你的R 的版本了。 二、解决方…

langchain教程-(1)Prompt模板

LangChain 的核心组件 模型 I/O 封装 LLMs&#xff1a;大语言模型Chat Models&#xff1a;一般基于 LLMs&#xff0c;但按对话结构重新封装PromptTemple&#xff1a;提示词模板OutputParser&#xff1a;解析输出 数据连接封装 Document Loaders&#xff1a;各种格式文件的加载…