在实际项目中,Rollup 通常会生成 “共用” chunk —— 被两个或以上的其他 chunk 共享的 chunk。与动态导入相结合,会很容易出现下面这种场景:

在无优化的情境下,当异步 chunk A 被导入时,浏览器将必须请求和解析 A,然后它才能弄清楚它首先需要那个共用 chunk C。这会导致额外的网络往返:

Entry ---> A ---> C

Vite 将使用一个预加载步骤自动重写代码,来分割动态导入调用,因而当 A 被请求时,C 也将 同时 被获取到:

Entry ---> (A + C)

C 也可能有更深的导入,在未优化的场景中,这甚至会导致额外网络往返。Vite 的优化会跟踪所有的直接导入,无论导入的深度如何,都能够完全消除不必要的往返。

参考资料:https://cn.vitejs.dev/guide/features.html#async-chunk-loading-optimization

Vite 异步 Chunk 加载优化的更多相关文章

  1. iOS异步图片加载优化与常用开源库分析

    网络图片显示大体步骤: 1.下载图片: 2.图片处理(裁剪,边框等): 3.写入磁盘: 4.从磁盘读取数据到内核缓冲区: 5.从内核缓冲区复制到用户空间(内存级别拷贝): 6.解压缩为位图(耗cpu较 ...

  2. iOS Cell异步图片加载优化,缓存机制详解

    最近研究了一下UITbleView中异步加载网络图片的问题,iOS应用经常会看到这种界面.一个tableView上显示一些标题.详情等内容,在加上一张图片.这里说一下这种思路. 为了防止图片多次下载, ...

  3. vue加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...

  4. js资源加载优化

    互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...

  5. js加载优化三

    Javascript性能优化之异步加载和执行 Author:小欧2013-09-17 随着科技的发展,如今的网站和五六年前相比,现在的人们对web的要求越来越高了,用户体验,交互效果,视觉效果等等都有 ...

  6. js加载优化-二

    http://www.cnblogs.com/radom/archive/2011/04/26/2028886.html ontrolJS 主要为了是解决网页加载中Js文件的性能问题,ControlJ ...

  7. echarts异步数据加载(在下拉框选择事件中异步更新数据)

    接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...

  8. webpack分片chunk加载原理

    首先,使用create-react-app快速创建一个demo npx create-react-app react-demo # npx命令需要npm5.2+ cd react-demo npm s ...

  9. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  10. javascript 异步模块加载 简易实现

    在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...

随机推荐

  1. 一个基于 ASP.NET Core 实现的领域驱动设计落地战术框架

    前言 今天大姚给大家分享一个基于 ASP.NET Core 实现的领域驱动设计落地战术框架:netcorepal-cloud-framework. 框架介绍 netcorepal-cloud-fram ...

  2. JDK网站最终的拼图

    "JDK源码剖析网"目前只上线了一小部分的内容(而且还未更新完成),Javac编译器,HotSpot基础.垃圾收集器以及HotSpot运行时将在今年10月份之前做为付费内容努力更新 ...

  3. Qt渲染漫谈(一)

    最近在看一些关于游戏引擎的东西,本来是有几个游戏的小点子,其实实现起来还挺麻烦的,想找个游戏引擎看看能不能码起来.辗转之后发现了很多2D引擎,其中国产的要数cocos2dx用的好像是比较广泛,但是好多 ...

  4. 【服务器备份方案】基于Duplicati+Alist+阿里云盘的备份方案

    服务器备份方案 该博文转载自我的个人博客:小树 | 服务器备份方案 前言 在我们实际的生产环境中,由于云服务存在很多的不稳定性,因此对服务器进行定时备份就很有必要了. 虽然部分服务器厂商提供了快照备份 ...

  5. LLM 上下文长度详细介绍

    1.概述 在<Token:大语言模型的"语言乐高",一切智能的基石>与<LLM 输出配置 (LLM output configuration)>这两篇博文中 ...

  6. AI大模型应用开发入门-LangChain开发Agent

    基于 LangChain 和 GPT-4o-mini 的大模型智能体开发实战 近年来,大模型能力的持续突破,使得构建智能代理(Agent)系统成为开发者追逐的热点. 本文将以 LangChain 框架 ...

  7. 推荐五大AI+MCP自动化测试工具!

    在当今快速发展的软件行业,自动化测试已成为提升开发效率和产品质量的关键.今天,我们将给大家推荐五大MCP自动化测试工具,助你在自动化测试领域更进一步. 1.MCP介绍 首先,你得知道,MCP是什么? ...

  8. 3-6softmax回归从0开始实现

    3-6softmax回归从0开始实现 import torch from IPython import display from d2l import torch as d2l batch_size ...

  9. Eplan教程:供电回路、柜内照明、风机空调

    欢迎大家来到"Eplan带你做项目"第四个过程.在第三个过程中,Eplan带你进入了机械设计中的流体工程设计,向大家介绍了Eplan中怎样进行流体工程设计. 在本次过程中,Epla ...

  10. 从Rust想到C#

    近几年,RUST语言越来越受大家的喜爱,排除去一些跟风者,大部分的人喜欢RUST的内存安全性和高效的性能.但编译速度始终是它的短板. 这几天,突然有一个想法,如果C#或者说.NET的编译器也做成RUS ...