首页 > 其他分享 >vite依赖预构建

vite依赖预构建

时间:2023-07-02 13:22:05浏览次数:22  
标签:依赖 构建 ES 模块 vite Vite

前言

当你首次启动 vite 时,Vite 在本地加载你的站点之前预构建了项目依赖。默认情况下,它是自动且透明地完成的。

import _ from 'loadsh'

export const count = 999

为什么能找到loadsh?vite在处理过程中,如果看到了非绝对或者相对路径,他会尝试开启自动补全。找寻依赖的过程是自当前目录依次向上查找的过程,直到搜宣到根目录或者找到为止。

开发与生产环境

依赖预构建仅适用于开发模式,并使用 esbuild 将依赖项转换为 ES 模块(因为并不知道第三方库的作者使用的是esmodule还是commonjs),相当于重新打包一遍。在生产构建中,将使用 @rollup/plugin-commonjs。而在生产环境vite会全权交个rollup的库来完成生产环境的打包(这个功能更强大,支持commonjs)

原因

CommonJS 和 UMD 兼容性: 在开发阶段中,Vite 的开发服务器将所有代码视为原生 ES 模块。因此,Vite 必须先将以 CommonJS 或 UMD 形式提供的依赖项转换为 ES 模块。

在转换 CommonJS 依赖项时,Vite 会进行智能导入分析,这样即使模块的导出是动态分配的(例如 React),具名导入(named imports)也能正常工作:

性能: 为了提高后续页面的加载性能,Vite将那些具有许多内部模块的 ESM 依赖项转换为单个模块。

有些包将它们的 ES 模块构建为许多单独的文件,彼此导入。例如,lodash-es 有超过 600 个内置模块!当我们执行 import { debounce } from 'lodash-es' 时,浏览器同时发出 600 多个 HTTP 请求!即使服务器能够轻松处理它们,但大量请求会导致浏览器端的网络拥塞,使页面加载变得明显缓慢。

通过将 lodash-es 预构建成单个模块,现在我们只需要一个HTTP请求!

解决了3个问题

image

标签:依赖,构建,ES,模块,vite,Vite
From: https://www.cnblogs.com/zychuan/p/17520680.html

相关文章

  • Eclipse里web的依赖工程部署的简便方法
    用Eclipse开发项目,曾经为依赖工程的部署问题头疼过,用了MyEclipse之后就没有仔细去研究,最近研究了下,还真找到了比较简便的方法,之前都是采用Ant打jar包,copy到web工程,或者通过LinkSource,直接把依赖工程编译到web工程下边,但这样感觉总不是个长久之计,因为前者每次编译都要打包太过麻烦,......
  • 构建云上和云下统一的安全方案,华为云致力为企业降本增效
    在云计算的时代,企业的业务系统已经不再局限于单一的环境,而是跨越了云端和本地,形成了云上云下的部署模式。然而,这种模式带来的是安全防护的挑战,企业需要在云上云下都实现安全防护,同时还要降低运营成本。面对这种挑战,华为云提出了云上云下一体化的解决方案,打造统一、高效的安全管理平......
  • 动态规划之有依赖的背包问题
    简化的问题这种背包问题的物品间存在某种“依赖”的关系。也就是说,i依赖于j,表示若选物品i,则必须选物品j。为了简化起见,我们先设没有某个物品既依赖于别的物品,又被别的物品所依赖;另外,没有某件物品同时依赖多件物品。算法这个问题由NOIP2006金明的预算方案一题扩展而来。遵从该题......
  • 【C#/.NET】MAUI上的依赖注入
    ​引言        在移动应用开发中,依赖注入是一项非常重要的技术,它可以帮助我们简化代码结构、提高可维护性并增加测试覆盖率。在最新的.NET跨平台框架MAUI中,我们也可以利用依赖注入来构建高效的应用程序架构。本文将详细介绍在MAUI上如何使用依赖注入,旨在帮助开发者更好......
  • Maven高级相关知识:模块,打包方式,依赖继承,聚合,私服搭建
    Maven高级相关知识:模块,打包方式,依赖继承,聚合,私服搭建01.Maven是一款构建和管理Java项目的工具1.Maven高级内容包括:1.分模块设计与开发2.继承与聚合3.私服02.分模块设计:我们在进行项目设计阶段,就可以将一个大的项目拆分成若干个模块,每一个模块都是独立的.分模块设计就是......
  • 对标世界一流!构建更适合国有企业的全面预算体系!
    随着我国贯彻落实“高质量发展”理念,经济发展重点正从规模数量增长转向效益质量转型。对于多元化大型地方国有企业集团而言,由于其在管理机制和人才方面相对滞后,迫切需要在较短时间内通过“对标世界一流”和“数智化”相结合的方式全面提升预算管理水平。某国有控股上市公司在能源和......
  • Vite之根据不同的打包配置文件对打包文件夹名进行配置
    1.在package.json配置打包命令"scripts":{"dev":"vite--port3010--modedevelopment","build:formGD":"vitebuild--modeformGD","build:processGD":"vitebuild--modeprocessGD",......
  • Android 构建脚本从Groovy迁移到Kotlin DSL
    原文:https://edenxio.github.io/2019/02/01/Android%20%E6%9E%84%E5%BB%BA%E8%84%9A%E6%9C%AC%E4%BB%8EGroovy%E8%BF%81%E7%A7%BB%E5%88%B0Kotlin%20DSL/ 为什么要迁移?因为Groovy是动态语言,在用作Android构建脚本的时候,经常有些问题:很差的IDE支持(自动提示等)性能问题......
  • 项目中pom依赖冲突问题解决
    首先,确定插件中jBoss-JBPM和UML已经勾上 然后安装maven-Helper 在pom.xml中,右键点击diagrams,showDependencies 则可以看到各依赖关联情况,其中,红色虚线则表示有依赖冲突 如图中的红色虚线,是插件自己标识的,不是本人后期画的 在pom.xml最下方,可以切换sheet,切换到......
  • Vue3 vite:is a JavaScript file. Did you mean to enable the 'allowJs' option?
    描述今天在vue3+vite下进行打包时,突然vscode报了一个error。 大概的意识是询问是否启用“allowJS”选项,因为该文件在程序内是指定用于编译的根文件。提示信息已经很明确了,下面从网上摘抄了下什么是allowJS选项。allowJs是1.8中新提供的选项。TypeScrip......