[Vite]Vite插件生命周期了解
Chunk和Bundle的概念
-
Chunk:
- 在 Vite 中,
chunk
通常指的是应用程序中的一个代码片段,它是通过 Rollup 或其他打包工具在构建过程中生成的。每个 chunk 通常包含应用程序的一部分逻辑,可能是一个路由视图、一个组件或一组相关的模块。 - 与 Webpack 类似,Vite 也支持代码分割(Code Splitting),可以将代码拆分成不同的 chunk 以实现按需加载,从而优化应用的性能和加载时间。
- 在 Vite 中,
-
Bundle:
bundle
是指最终的输出文件,它是通过打包工具将多个模块、库和资源组合在一起形成的。在 Vite 的生产构建中,Rollup 会将应用程序的代码和依赖项打包成一个或多个 bundle。- Bundle 可以包含一个或多个 chunk,并且可能还会包括一些额外的元数据和辅助代码,如运行时代码、模块的映射信息等。
- Vite 的输出 bundle 旨在优化生产环境的加载和执行,通常会进行压缩、树摇(Tree Shaking)和模块的合并等操作。
vite插件钩子
Vite的插件可以有两种形式,一种是vite插件,仅供vite使用;另一种则是rollup通用插件,它不使用 Vite 特有的钩子,让我们简单介绍一下关于这两种插件的生命周期:
所有钩子
- apply - 插件的入口点,Vite 会调用每个插件的
apply
函数,传入 Vite 的配置对象。 - config - 在 Vite 的配置被最终确定之前,允许插件修改配置。此钩子接收当前配置并应返回新的配置。
- configResolved - 在配置被解析并确定后调用,允许插件访问最终的配置。
- configureServer - 允许插件配置或修改 Vite 的开发服务器。
- transform - 在开发阶段,Vite 调用此钩子来请求插件对特定文件进行转换。
- render - 在开发阶段,Vite 调用此钩子来请求插件对 HTML 模板进行渲染。
- buildStart - 在构建开始之前调用。
- build - 在构建过程中调用,允许插件参与构建流程。
- generateBundle - 在构建结束时调用,允许插件访问或修改最终生成的 bundle。
- closeBundle - 在构建过程中,当一个 bundle 被写入磁盘后调用。
- writeBundle - 在构建过程中,当 bundle 准备写入磁盘时调用。
- optimizeDeps - 允许插件优化依赖,例如决定哪些依赖应该被包含在客户端。
- load - 允许插件提供一个模块的加载内容,而不是从文件系统中加载。
- resolveId - 允许插件介入模块 ID 的解析过程。
- shouldHandleRequest - 允许插件决定是否处理特定的请求。
- handleHotUpdate - 在 HMR(热模块替换)过程中,允许插件处理更新。
- transformIndexHtml - 在开发阶段,允许插件修改 HTML 模板。
- enforce - 指定插件应用的时机,可以是
'pre'
或'post'
,分别表示在 Vite 默认插件之前或之后执行。
1. vite 独有的钩子
enforce
:值可以是pre
或post
,pre
会较于post
先执行;apply
:值可以是build
或serve
亦可以是一个函数,指明它们仅在build
或serve
模式时调用;config(config, env)
:可以在 vite 被解析之前修改 vite 的相关配置。钩子接收原始用户配置 config 和一个描述配置环境的变量env;configResolved(resolvedConfig)
:在解析 vite 配置后调用。使用这个钩子读取和存储最终解析的配置。当插件需要根据运行的命令做一些不同的事情时,它很有用。configureServer(server)
:主要用来配置开发服务器,为 dev-server (connect 应用程序) 添加自定义的中间件;transformIndexHtml(html)
:转换 index.html 的专用钩子。钩子接收当前的 HTML 字符串和转换上下文;handleHotUpdate(ctx)
:执行自定义HMR更新,可以通过ws往客户端发送自定义的事件;
2. vite 与 rollup 的通用钩子之构建阶段
options(options)
:在服务器启动时被调用:获取、操纵Rollup选项,严格意义上来讲,它执行于属于构建阶段之前;buildStart(options)
:在每次开始构建时调用;resolveId(source, importer, options)
:在每个传入模块请求时被调用,创建自定义确认函数,可以用来定位第三方依赖;load(id)
:在每个传入模块请求时被调用,可以自定义加载器,可用来返回自定义的内容;transform(code, id)
:在每个传入模块请求时被调用,主要是用来转换单个模块;buildEnd(error?: Error)
:在构建阶段结束后被调用,此处构建结束只是代表所有模块转义完成;
3. vite 与 rollup 的通用钩子之输出阶段
outputOptions(options)
:接受输出参数;renderStart(outputOptions, inputOptions)
:每次 bundle.generate 和 bundle.write 调用时都会被触发;augmentChunkHash(chunkInfo)
:用来给 chunk 增加 hash;renderChunk(code, chunk, options)
:转译单个的chunk时触发。rollup 输出每一个chunk文件的时候都会调用;generateBundle(options, bundle, isWrite)
:在调用 bundle.write 之前立即触发这个 hook;writeBundle(options, bundle)
:在调用 bundle.write后,所有的chunk都写入文件后,最后会调用一次 writeBundle;closeBundle()
:在服务器关闭时被调用
4. 插件钩子函数 hooks 的执行顺序
按照顺序,首先是配置解析相关:
- config:vite专有
- configResolved :vite专有
- options
- configureServer :vite专有
接下来是构建阶段的钩子:
- buildStart
- Resolved
- load
- transform
- buildEnd
然后是输出阶段的钩子:
- outputOptions
- renderStart
- augmentChunkHash
- renderChunk
- generateBundle
- transformIndexHtml
- writeBundle
- closeBundle
5. 插件的执行顺序
- 别名处理Alias
- 用户插件设置
enforce: 'pre'
- vite 核心插件
- 用户插件未设置
enforce
- vite 构建插件
- 用户插件设置
enforce: 'post'
- vite 构建后置插件(minify, manifest, reporting)
举例
统计打包后dist大小
实现一个统计打包后dist大小的插件
主要使用的是closeBundle这个钩子。
import fs from 'fs'
import path from 'path'
import { Plugin } from 'vite'
function getFolderSize(folderPath: string): number {
if (!fs.existsSync(folderPath) || !fs.lstatSync(folderPath).isDirectory()) {
return 0
}
let totalSize = 0
const files = fs.readdirSync(folderPath)
files.forEach(file => {
const filePath = path.join(folderPath, file)
const stats = fs.statSync(filePath)
if (stats.isFile()) {
totalSize += stats.size
} else if (stats.isDirectory()) {
totalSize += getFolderSize(filePath)
}
})
return totalSize
}
function formatBytes(bytes: number, decimals: number = 2): string {
if (bytes === 0) return '0.00'
const megabytes = bytes / (1024 * 1024)
return megabytes.toFixed(decimals)
}
function calculateDistSizePlugin(): Plugin {
let distPath = ''
return {
name: 'calculate-dist-size',
enforce: 'post' as const,
apply: 'build' as const,
configResolved(config) {
// 可以在这里获取打包输出的目录
const outDir = config.build.outDir
distPath = outDir
},
closeBundle() {
if (!distPath) {
console.error('Fail to get size of dist folder.')
return
}
const distSize = getFolderSize(distPath)
const formattedSize = formatBytes(distSize)
console.log(`Size of dist folder: ${formattedSize} MB`)
}
}
}
export default calculateDistSizePlugin
自己实现的React热更新+SWC打包插件
这个插件利用 SWC 来编译 JavaScript 和 TypeScript 代码,并在 Vite 开发服务器中提供 React JSX热更新。此外,它还处理构建配置,以确保代码被正确地编译为适用于生产环境的格式。
import { Output, ParserConfig, ReactConfig, transform } from '@swc/core'
import { readFileSync, readdirSync } from 'fs'
import { SourceMapPayload } from 'module'
import { dirname, join } from 'path'
import { fileURLToPath } from 'url'
import { BuildOptions, PluginOption, UserConfig, createFilter } from 'vite'
import { createRequire } from 'node:module'
import { ViteOptions } from './type'
import { runtimePublicPath, preambleCode, refreshContentRE } from './const'
const _dirname = typeof __dirname !== 'undefined' ? __dirname : dirname(fileURLToPath(import.meta.url))
const _resolve = typeof global.require !== 'undefined' ? global.require.resolve : createRequire(import.meta.url).resolve
const plugin = (_options?: ViteOptions): PluginOption[] => {
const options = {
..._options,
target: _options?.target || 'es2017',
jsxImportSource: _options?.jsxImportSource || 'react'
}
// vite配置中的buildTarget
const buildTarget = options.target
const filter = options.include || options.exclude ? createFilter(options.include, options.exclude) : null
// 核心函数:根据配置调用SWC编译代码
const transformWithSwc = async (fileName: string, code: string, reactConfig: ReactConfig) => {
if ((!filter && fileName.includes('node_modules')) || (filter && !filter(fileName))) return
const decorators = true
const parser: ParserConfig | undefined = fileName.endsWith('.tsx')
? { syntax: 'typescript', tsx: true, decorators }
: fileName.endsWith('.ts')
? { syntax: 'typescript', tsx: false, decorators }
: fileName.endsWith('.jsx')
? { syntax: 'ecmascript', jsx: true }
: fileName.endsWith('.mdx')
? // JSX is required to trigger fast refresh transformations, even if MDX already transforms it
{ syntax: 'ecmascript', jsx: true }
: undefined
if (!parser) return
let result: Output
try {
const swcTransformConfig: any = {
// 允许被配置文件覆盖
swcrc: true,
rootMode: 'upward-optional',
filename: fileName,
minify: false,
jsc: {
// target: buildTarget,
parser,
transform: {
useDefineForClassFields: false,
react: {
...reactConfig,
useBuiltins: true
}
}
},
env: {
targets: {
safari: '11',
edge: '79',
chrome: '73'
},
mode: 'usage',
coreJs: '3.36'
}
}
// 两者不兼容,只能取其一
if (swcTransformConfig.env && swcTransformConfig.jsc.target) {
delete swcTransformConfig.jsc.target
}
result = await transform(code, swcTransformConfig)
} catch (e: any) {
// 输出错误信息
const message: string = e.message
const fileStartIndex = message.indexOf('╭─[')
if (fileStartIndex !== -1) {
const match = message.slice(fileStartIndex).match(/:(\d+):(\d+)]/)
if (match) {
e.line = match[1]
e.column = match[2]
}
}
throw e
}
return result
}
const silenceUseClientWarning = (userConfig: UserConfig): BuildOptions => ({
rollupOptions: {
onwarn(warning, defaultHandler) {
if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('use client')) {
return
}
if (userConfig.build?.rollupOptions?.onwarn) {
userConfig.build.rollupOptions.onwarn(warning, defaultHandler)
} else {
defaultHandler(warning)
}
}
}
})
const resolveSwcHelpersDeps = () => {
let helperList: string[] = []
try {
const file = _resolve('@swc/helpers')
if (file) {
const dir = dirname(file)
const files = readdirSync(dir)
helperList = files.map(file => join(dir, file))
}
} catch (e) {
console.error(e)
}
return helperList
}
return [
// dev时热更新1:加载热更新功能
{
name: 'vite:swc:resolve-runtime',
apply: 'serve',
enforce: 'pre', // Run before Vite default resolve to avoid syscalls
resolveId: id => (id === runtimePublicPath ? id : undefined),
load: id => (id === runtimePublicPath ? readFileSync(join(_dirname, 'refresh-runtime.js'), 'utf-8') : undefined)
},
// dev时热更新2:热更新核心插件
{
name: 'vite:swc',
apply: 'serve',
config: userConfig => {
const userOptimizeDepsConfig = userConfig?.optimizeDeps?.disabled
const optimizeDepsDisabled = userOptimizeDepsConfig === true || userOptimizeDepsConfig === 'dev'
// 预编译列表
const optimizeDeps = !optimizeDepsDisabled
? ['react', `${options.jsxImportSource}/jsx-dev-runtime`, ...resolveSwcHelpersDeps()]
: undefined
return {
esbuild: false,
optimizeDeps: {
include: optimizeDeps,
esbuildOptions: {
target: buildTarget,
supported: {
decorators: true // esbuild 0.19在使用target为es2017时,预构建会报错,这里假定目标浏览器支持装饰器,避开报错
}
}
},
resolve: {
dedupe: ['react', 'react-dom']
}
}
},
transformIndexHtml: (_, config) => [
{
tag: 'script',
attrs: { type: 'module' },
children: preambleCode.replace('__PATH__', config.server!.config.base + runtimePublicPath.slice(1))
}
],
async transform(code, _id, transformOptions) {
const id = _id.split('?')[0]
const result = await transformWithSwc(id, code, {
refresh: !transformOptions?.ssr,
development: true,
runtime: 'automatic',
importSource: options.jsxImportSource
})
if (!result) return
if (transformOptions?.ssr || !refreshContentRE.test(result.code)) {
return result
}
result.code = /*js*/ `
import * as RefreshRuntime from "${runtimePublicPath}";
if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
const prevRefreshReg = window.$RefreshReg$;
const prevRefreshSig = window.$RefreshSig$;
window.$RefreshReg$ = RefreshRuntime.getRefreshReg("${id}");
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
${result.code}
window.$RefreshReg$ = prevRefreshReg;
window.$RefreshSig$ = prevRefreshSig;
RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
RefreshRuntime.registerExportsForReactRefresh("${id}", currentExports);
import.meta.hot.accept((nextExports) => {
if (!nextExports) return;
const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
});
});
`
if (result.map) {
const sourceMap: SourceMapPayload = JSON.parse(result.map)
sourceMap.mappings = ';;;;;;;;' + sourceMap.mappings
return { code: result.code, map: sourceMap }
} else {
return { code: result.code }
}
}
},
// 打包时候使用的插件
{
name: 'vite:swc',
apply: 'build',
enforce: 'post', // Run before esbuild
config: userConfig => ({
build: {
...silenceUseClientWarning(userConfig),
target: buildTarget
},
resolve: {
dedupe: ['react', 'react-dom']
}
}),
transform: (code, _id) =>
transformWithSwc(_id.split('?')[0], code, {
runtime: 'automatic',
importSource: options.jsxImportSource
})
}
]
}
export default plugin
- 导入依赖:代码开始部分导入了所需的 Node.js 内置模块和第三方库,以及 Vite 和 SWC 的相关 API。
- 定义插件函数:
plugin
函数接受一个可能包含用户配置的对象_options
,并返回一个 Vite 插件数组。 - 配置选项合并:函数内部,用户配置与默认配置合并,以设置插件的行为,例如编译目标
target
和 JSX 导入源jsxImportSource
。 - 创建过滤器:如果用户提供了
include
或exclude
规则,会创建一个过滤器filter
,用于决定哪些文件应该被插件处理。 - SWC 转换函数:
transformWithSwc
异步函数接收文件名、代码和 React 配置,调用 SWC 的transform
API 来编译代码。 - 错误处理:在 SWC 转换过程中,如果出现错误,会尝试提取错误消息中的错误行和列,并重新抛出格式化后的错误。
- 静默警告:
silenceUseClientWarning
函数用于抑制 Rollup 的某些警告,特别是与'use client'
指令相关的警告。 - 解析 SWC 辅助依赖:
resolveSwcHelpersDeps
函数尝试解析@swc/helpers
包中的辅助函数文件列表。 - 定义 Vite 插件对象:返回的插件数组中包括两个主要的插件对象,一个用于开发环境,另一个用于构建环境。
- 开发环境插件:
- 设置了
name
、apply
、config
、transformIndexHtml
和transform
属性来定义插件的行为。 - 使用
resolveId
和load
处理 React 快速刷新的运行时脚本。 transform
方法用于对代码进行转换,并添加了 React 快速刷新的相关代码。
- 设置了
- 构建环境插件:
- 设置了
name
、apply
、config
和transform
属性。 - 在构建配置中应用了静默警告配置,并指定了编译目标。
- 设置了
- React 快速刷新:在开发环境中,插件通过修改
transformIndexHtml
和transform
方法来支持 React 快速刷新。 - 导出默认:最后,
plugin
函数作为默认导出,使其可以在 Vite 配置中使用。
参考文章和地址
https://juejin.cn/post/7103165205483356168?searchId=20240706212202081D45CDF4733CF7923F#heading-17
https://article.juejin.cn/post/7211745375920586813
https://cn.vitejs.dev/