vite构建build选项配置(2024-05-29)


build.target​

  • 类型: string | string[]
  • 默认: 'modules'
  • 相关内容: 浏览器兼容性

设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值:'modules',这是指 支持原生 ES 模块、原生 ESM 动态导入 和 import.meta 的浏览器。Vite 将替换 modules 为 ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']

另一个特殊值是 “esnext” —— 即假设有原生动态导入支持,并且将会转译得尽可能小:

  • 如果 build.minify 选项为 'terser',并且安装的 Terser 版本小于 5.16.0,'esnext' 将会强制降级为 'es2021'
  • 其他情况下将完全不会执行转译。

转换过程将会由 esbuild 执行,并且此值应该是一个合法的 esbuild 目标选项。自定义目标也可以是一个 ES 版本(例如:es2015)、一个浏览器版本(例如:chrome58)或是多个目标组成的一


build.modulePreload​

  • 类型: boolean | { polyfill?: boolean, resolveDependencies?: ResolveModulePreloadDependenciesFn }
  • 默认值: { polyfill: true }

默认情况下,一个 模块预加载 polyfill 会被自动注入。该 polyfill 会自动注入到每个 index.html 入口的的代理模块中。如果构建通过 build.rollupOptions.input 被配置为了使用非 HTML 入口的形式,那么必须要在你的自定义入口中手动引入该 polyfill:

js

import 'vite/modulepreload-polyfill'

注意:此 polyfill 不适用于 Library 模式。如果你需要支持不支持动态引入的浏览器,你应该避免在你的库中使用此选项。

此 polyfill 可以通过 { polyfill: false } 来禁用。

每个动态导入要预加载的块列表将由 Vite 计算。默认情况下,在载入这些依赖时,会使用一个包含 base 的绝对路径。如果 base 是相对路径('' 或者 './'),解析时则会使用 import.meta.url,以避免出现依赖于最终部署基路径的绝对路径。

目前有一个实验性功能支持使用 resolveDependencies 函数对依赖项列表及其路径进行细粒度控制。可以在这里 提供反馈。它期望接收一个 ResolveModulePreloadDependenciesFn 类型的函数:

ts

type ResolveModulePreloadDependenciesFn = (url: string,deps: string[],context: {importer: string},
) => string[]

resolveDependencies 函数将为每个动态导入调用,同时带着一个它所依赖的 chunk 列表。并且它还会为每个在入口 HTML 文件中导入的 chunk 调用。 可以返回一个新的依赖关系数组,可能被过滤后变少了,也可能有更多依赖注入进来了,同时它们的路径也被修改过。deps 路径是相对于 build.outDir 的。若在注入该模块到 HTML head 时使用 new URL(dep, import.meta.url) 获取绝对路径,则对于 hostType === 'js',允许返回一个相对于 hostId 的路径。

js

type ResolveModulePreloadDependenciesFn = (url: string,deps: string[],context: {importer: string},
) => string[]

解析得到的依赖路径可以再在之后使用 experimental.renderBuiltUrl 更改。


build.polyfillModulePreload​

  • 类型: boolean
  • 默认: true
  • 已废弃 请使用 build.modulePreload.polyfill 替代

是否自动注入一个 模块预加载 polyfill。


build.outDir​

  • 类型: string
  • 默认: dist

指定输出路径(相对于 项目根目录).


build.assetsDir​

  • 类型: string
  • 默认: assets

指定生成静态资源的存放路径(相对于 build.outDir)。在 库模式 下不能使用。


build.assetsInlineLimit​

  • 类型: number | ((filePath: string, content: Buffer) => boolean | undefined)
  • 默认: 4096 (4 KiB)

小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求。设置为 0 可以完全禁用此项。

如果传入了一个回调函数,可以通过返回一个布尔值来选择是否加入。如果没有返回任何内容,那么就会应用默认的逻辑。

Git LFS 占位符会自动排除在内联之外,因为它们不包含其所表示的文件的内容。

注意

如果你指定了 build.lib,那么 build.assetsInlineLimit 将被忽略,无论文件大小或是否为 Git LFS 占位符,资源都会被内联。


build.cssCodeSplit​

  • 类型: boolean
  • 默认: true

启用/禁用 CSS 代码拆分。当启用时,在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身,并在其被加载时一并获取。

如果禁用,整个项目中的所有 CSS 将被提取到一个 CSS 文件中。

注意

如果指定了 build.libbuild.cssCodeSplit 会默认为 false


build.cssTarget​

  • 类型: string | string[]
  • 默认值: 与 build.target 一致

此选项允许用户为 CSS 的压缩设置一个不同的浏览器 target,此处的 target 并非是用于 JavaScript 转写目标。

应只在针对非主流浏览器时使用。 最直观的示例是当你要兼容的场景是安卓微信中的 webview 时,它支持大多数现代的 JavaScript 功能,但并不支持 CSS 中的 #RGBA 十六进制颜色符号。 这种情况下,你需要将 build.cssTarget 设置为 chrome61,以防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式。


build.cssMinify​

  • 类型: boolean | 'esbuild' | 'lightningcss'
  • 默认: 与 build.minify 一致

此选项允许用户覆盖 CSS 最小化压缩的配置,而不是使用默认的 build.minify,这样你就可以单独配置 JS 和 CSS 的最小化压缩方式。Vite 默认使用 esbuild 来最小化 CSS。将此选项设置为 'lightningcss' 可以改用 Lightning CSS 进行压缩。设置为该项,便可以使用 css.lightningcss 选项来进行配置。


build.sourcemap​

  • 类型: boolean | 'inline' | 'hidden'
  • 默认: false

构建后是否生成 source map 文件。如果为 true,将会创建一个独立的 source map 文件。如果为 'inline',source map 将作为一个 data URI 附加在输出文件中。'hidden' 的工作原理与 true 相似,只是 bundle 文件中相应的注释将不被保留。


build.rollupOptions​

  • 类型: RollupOptions

自定义底层的 Rollup 打包配置。这与从 Rollup 配置文件导出的选项相同,并将与 Vite 的内部 Rollup 选项合并。查看 Rollup 选项文档 获取更多细节。


build.commonjsOptions​

  • 类型: RollupCommonJSOptions

传递给 @rollup/plugin-commonjs 插件的选项。


build.dynamicImportVarsOptions​

  • 类型: RollupDynamicImportVarsOptions
  • 相关内容: 动态导入

传递给 @rollup/plugin-dynamic-import-vars 的选项。


build.lib​

  • 类型: { entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string) }
  • 相关内容: 库模式

构建为库。entry 是必需的,因为库不能使用 HTML 作为入口。name 则是暴露的全局变量,并且在 formats 包含 'umd' 或 'iife' 时是必需的。默认 formats 是 ['es', 'umd'],如果使用了多个配置入口,则是 ['es', 'cjs']fileName 是输出的包文件名,默认 fileName 是 package.json 的 name 选项,同时,它还可以被定义为参数为 format 和 entryAlias 的函数。


build.manifest​

  • 类型: boolean | string
  • 默认: false
  • 相关内容: 后端集成

当设置为 true,构建后将会生成 .vite/manifest.json 文件,包含了没有被 hash 过的资源文件名和 hash 后版本的映射。可以为一些服务器框架渲染时提供正确的资源引入链接。当该值为一个字符串时,它将作为 manifest 文件的名字。


build.ssrManifest​

  • 类型: boolean | string
  • 默认值: false
  • 相关链接: 服务端渲染

当设置为 true 时,构建也将生成 SSR 的 manifest 文件,以确定生产中的样式链接与资产预加载指令。当该值为一个字符串时,它将作为 manifest 文件的名字。


build.ssr​

  • 类型: boolean | string
  • 默认值: false
  • 相关链接: 服务端渲染

生成面向 SSR 的构建。此选项的值可以是字符串,用于直接定义 SSR 的入口,也可以为 true,但这需要通过设置 rollupOptions.input 来指定 SSR 的入口。


build.ssrEmitAssets​

  • 类型: boolean
  • 默认: false

在 SSR 构建期间,静态资源不会被输出,因为它们通常被认为是客户端构建的一部分。这个选项允许框架强制在客户端和 SSR 构建中都输出它们。将静态资源在构建后合并是框架的责任。


build.minify​

  • 类型: boolean | 'terser' | 'esbuild'
  • 默认: 客户端构建默认为'esbuild',SSR构建默认为 false

设置为 false 可以禁用最小化混淆,或是用来指定使用哪种混淆器。默认为 Esbuild,它比 terser 快 20-40 倍,压缩率只差 1%-2%。Benchmarks

注意,在 lib 模式下使用 'es' 时,build.minify 选项不会缩减空格,因为会移除掉 pure 标注,导致破坏 tree-shaking。

当设置为 'terser' 时必须先安装 Terser。

sh

npm add -D terser

build.terserOptions​

  • 类型: TerserOptions

传递给 Terser 的更多 minify 选项。

此外,你还可以传递一个 maxWorkers: number 选项来指定最大的工作线程数。默认为 CPU 核心数减 1。


build.write​

  • 类型: boolean
  • 默认: true

设置为 false 来禁用将构建后的文件写入磁盘。这常用于 编程式地调用 build() 在写入磁盘之前,需要对构建后的文件进行进一步处理。


build.emptyOutDir​

  • 类型: boolean
  • 默认: 若 outDir 在 root 目录下,则为 true

默认情况下,若 outDir 在 root 目录下,则 Vite 会在构建时清空该目录。若 outDir 在根目录之外则会抛出一个警告避免意外删除掉重要的文件。可以设置该选项来关闭这个警告。该功能也可以通过命令行参数 --emptyOutDir 来使用。


build.copyPublicDir​

  • 类型: boolean
  • 默认: true

默认情况下,Vite 会在构建阶段将 publicDir 目录中的所有文件复制到 outDir 目录中。可以通过设置该选项为 false 来禁用该行为。


build.reportCompressedSize​

  • 类型: boolean
  • 默认: true

启用/禁用 gzip 压缩大小报告。压缩大型输出文件可能会很慢,因此禁用该功能可能会提高大型项目的构建性能。


build.chunkSizeWarningLimit​

  • 类型: number
  • 默认: 500

规定触发警告的 chunk 大小。(以 kB 为单位)。它将与未压缩的 chunk 大小进行比较,因为 JavaScript 大小本身与执行时间相关。


build.watch​

  • 类型: WatcherOptions| null
  • 默认: null

设置为 {} 则会启用 rollup 的监听器。对于只在构建阶段或者集成流程使用的插件很常用。

在 Windows Linux 子系统(WSL)上使用 Vite

某些情况下 WSL2 的文件系统监听可能无法正常工作。


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

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

相关文章

软件构造复习的一些经验笔记

软件构造复习的一些经验笔记 术语解释 LSP原则(里氏替换原则) 什么是LSP原则,就是A类继承B类,A类应该比B类的spec(规约)更强 换句话说:你爹会做鱼香肉丝,你爹的手艺遗传给了你&a…

基于springboot实现医疗挂号管理系统项目【项目源码+论文说明】

基于springboot实现医疗挂号管理系统演示 摘要 在如今社会上,关于信息上面的处理,没有任何一个企业或者个人会忽视,如何让信息急速传递,并且归档储存查询,采用之前的纸张记录模式已经不符合当前使用要求了。所以&…

JAVA -- 逻辑控制详解

JAVA逻辑控制详解 1.顺序结构 按照代码书写的顺序一行一行执行 System.out.println("123");//123 System.out.println("456");//456 System.out.println("789");//7892.分支结构 if 语句 switch 语句 2.1 if 语句 语法格式1(单分支) //if(布…

安全阀检测周期:确定因素与操作流程详解

在工业生产中,安全阀扮演着至关重要的角色,其性能的稳定性和准确性直接关系到设备和系统的安全。为确保安全阀的正常运行和事故防范,对其进行定期检测显得尤为关键。 接下来,佰德将深入探讨安全阀检测周期相关的内容,…

HTML静态网页成品作业(HTML+CSS)——家乡芷江侗族自治县介绍网页(1个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有1个页面。 二、作品演示 三、代…

【ROS机器人学习】--------1ROS工作空间和功能包创建

虚拟机工具和镜像链接: https://pan.baidu.com/s/1HDmpbMESiUA2nj3qFVyFcw?pwd8686 提取码: 8686 ROS工作空间是一个用于组织和管理ROS(机器人操作系统)包的目录结构,它通常包含多个子目录,用于存放源码、构建文件和安装文件。工…

香橙派OrangePI AiPro测评

实物 为AI而生 打开盒子 截图电源开机进入 作为一个AI产品,必须有一个人机交互的界面才行。大家都在跑算法,于是我就开始进行整理着手整理搭建Qt的环境。 1、下载源码 wget https://download.qt.io/archive/qt/5.12/5.12.12/single/qt-everywhere-src-5.12.12.tar.xz待…

RDP方式连接服务器上传文件方法

随笔 目录 1. RDP 连接服务器 2. 为避免rdp 访问界面文字不清晰 3. 本地上传文件到服务器 1. RDP 连接服务器 # mstsc 连接服务器step1: 输入mstscstep2: 输入 IP, username, passwd 2. 为避免rdp 访问界面文字不清晰 解决方法: 3. 本地上传文件到服务器 step…

关于C++的特殊类定制

特殊类定制 在C中,一些特殊性质的类如何设计 类禁止拷贝的对象 C11 使用delete关键字赋值给拷贝构造和赋值C98将拷贝构造和赋值声明在私有里 类只能在堆上创建的对象 将构造函数私有化, 提供一个获取对象堆上创建对象的公有函数将析构函数私有化, 提供一个释放…

JavaScript面向对象编程入门:从0到1的奇幻之旅【含代码示例】

JavaScript面向对象编程入门:从零到英雄的奇幻之旅【含代码示例】 一、OOP:编程界的哈利波特基本概念类与实例 二、挥舞魔杖:创建类与实例基本语法 三、继承与封装:家族的力量继承封装 四、实战与技巧:打造坚固的魔法城…

IT行业的现状与未来发展趋势:从云计算到量子计算的技术变革

随着技术的不断进步,IT行业已经成为推动全球经济和社会发展的关键力量。从云计算、大数据、人工智能到物联网、5G通信和区块链,这些技术正在重塑我们的生活和工作方式。本文将深入探讨当前IT行业的现状,并展望未来发展趋势,旨在为…

vscode当前分支有未提交的修改,但是暂时不想提交,想要切换到另一个分支该怎么办

当前分支有未提交的修改,但是暂时不想提交,想要切换到另一个分支该怎么办? 首先,可以将当前修改暂存起来,以便之后恢复 git stash 然后切换到目标分支,例如需求A所在分支 git checkout feat-a-jie 修改完A需求后,需要先切换回之前的分支,例如需求B所在分支 git checkout feat…

免费插件集-illustrator插件-Ai插件-文本对象分行

文章目录 1.介绍2.安装3.通过窗口>扩展>知了插件4.功能解释5.总结 1.介绍 本文介绍一款免费插件,加强illustrator使用人员工作效率,进行文本对象分行。首先从下载网址下载这款插件 https://download.csdn.net/download/m0_67316550/87890501&…

通过安全的云开发环境重新发现 DevOps 的心跳

云开发平台如何“提升” DevOps 首先,我来简单介绍一下什么是云开发环境:它通常运行带有应用程序的 Linux 操作系统,提供预配置的环境,允许进行编码、编译和其他类似于本地环境的操作。从实现的角度来看,这样的环境类…

前端 JS 经典:读取文件原始内容

前言:有些时候在工程化开发中,我们需要读取文件里面的原始内容,比如,你有一个文件,后缀名为 .myfile,你需要拿到这个文件里的内容,该怎么处理呢。 在 vue2 中,因为 vue2 使用 vue-c…

【算法】前缀和——寻找数组的中心下标

本节博客是用前缀和算法图解“寻找数组的中心下标”,有需要借鉴即可。 目录 1.题目2.题意3.前缀和求解4.示例代码5.细节6.总结 1.题目 题目链接:LINK 2.题意 我们以示例1为例来图解一下题意: 3.前缀和求解 根据已有经验,我…

Java 读取 xml 文件的五种方式

在编写与 XML 数据交互的现代软件应用时,有效地读取和解析 XML 文件是至关重要的。XML(可扩展标记语言)因其灵活性和自我描述性,已成为数据存储和传输的一种普遍格式。对于 Java 开发者来说,Java 提供了多种工具和库来…

数据库索引相关的知识点总结

目录 1. 索引的概念 2. 索引的作用 3. 索引的类型 4. 索引的缺点 5. 索引的使用场景 6. 索引的设计原则 7. 索引的实现技术 8. 索引的优化技巧: 数据库表的索引是一个非常重要的概念,它类似于一本书的目录,可以帮助我们快速找到所需的…

Idea工具的使用技巧与常见问题解决方案

一、使用技巧 1、启动微服务配置 如上图,在编辑配置选项,将对应的启动入口类加进去, 增加jvm启动参数, 比如: -Denvuat 或者 -Denvuat -Dfile.encodingUTF-8 启动配置可能不是-Denvuat,这个自己看代…

Android 11 Audio音频系统配置文件解析

在AudioPolicyService的启动过程中,会去创建AudioPolicyManager对象,进而去解析配置文件 //frameworks/av/services/audiopolicy/managerdefault/AudioPolicyManager.cpp AudioPolicyManager::AudioPolicyManager(AudioPolicyClientInterface *clientIn…