diff --git a/.vitepress/theme/components/AsideSponsors.vue b/.vitepress/theme/components/AsideSponsors.vue index 90e6adda..dcaf4492 100644 --- a/.vitepress/theme/components/AsideSponsors.vue +++ b/.vitepress/theme/components/AsideSponsors.vue @@ -18,5 +18,68 @@ const sponsors = computed(() => { + + diff --git a/guide/cli.md b/guide/cli.md index e629dc77..be359d17 100644 --- a/guide/cli.md +++ b/guide/cli.md @@ -14,8 +14,8 @@ vite [root] #### 选项 {#options} -| 选项 | | -| ------------------------ | ------------------------------------------- | +| 选项 | | +| ------------------------ | -------------------------------------------------------------------------------------- | | `--host [host]` | 指定主机名称 (`string`) | | `--port ` | 指定端口 (`number`) | | `--https` | 使用 TLS + HTTP/2 (`boolean`) | @@ -27,6 +27,7 @@ vite [root] | `--base ` | 公共基础路径(默认为:`/`)(`string`) | | `-l, --logLevel ` | Info \| warn \| error \| silent (`string`) | | `--clearScreen` | 允许或禁用打印日志时清除屏幕 (`boolean`) | +| `--profile` | 启动内置的 Node.js 调试器(查看 [性能瓶颈](/guide/troubleshooting#performance-bottlenecks))| | `-d, --debug [feat]` | 显示调试日志 (`string \| boolean`) | | `-f, --filter ` | 过滤调试日志 (`string`) | | `-m, --mode ` | 设置环境模式 (`string`) | @@ -65,6 +66,7 @@ vite build [root] | `--base ` | 公共基础路径(默认为:`/`)(`string`) | | `-l, --logLevel ` | Info \| warn \| error \| silent (`string`) | | `--clearScreen` | 允许或禁用打印日志时清除屏幕 (`boolean`) | +| `--profile` | 启动内置的 Node.js 调试器(查看 [性能瓶颈](/guide/troubleshooting#performance-bottlenecks))| | `-d, --debug [feat]` | 显示调试日志 (`string \| boolean`) | | `-f, --filter ` | 过滤调试日志 (`string`) | | `-m, --mode ` | 设置环境模式 (`string`) | diff --git a/guide/features.md b/guide/features.md index 61b06e92..9143e1f4 100644 --- a/guide/features.md +++ b/guide/features.md @@ -500,7 +500,8 @@ const module = await import(`./dir/${file}.js`) ## WebAssembly {#webassembly} -预编译的 `.wasm` 文件可以通过 `?init` 来导入。默认导出一个初始化函数,返回值为所导出 wasm 实例对象的 Promise: +预编译的 `.wasm` 文件可以通过 `?init` 来导入。 +默认导出一个初始化函数,返回值为所导出 [`WebAssembly.Instance`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Instance) 实例对象的 Promise: ```js import init from './example.wasm?init' @@ -510,7 +511,7 @@ init().then((instance) => { }) ``` -`init` 函数还可以将传递给 `WebAssembly.instantiate` 的导入对象作为其第二个参数: +`init` 函数还可以将传递给 [`WebAssembly.instantiate`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/instantiate) 的导入对象作为其第二个参数: ```js init({ @@ -524,13 +525,54 @@ init({ }) ``` -在生产构建当中,体积小于 `assetInlineLimit` 的 `.wasm` 文件将会被内联为 base64 字符串。否则,它们将作为资源复制到 `dist` 目录中,并按需获取。 +在生产构建当中,体积小于 `assetInlineLimit` 的 `.wasm` 文件将会被内联为 base64 字符串。否则,它们将被视为 [静态资源](./assets) ,并按需获取。 -::: warning +::: tip 注意 [对 WebAssembly 的 ES 模块集成提案](https://github.com/WebAssembly/esm-integration) 尚未支持。 请使用 [`vite-plugin-wasm`](https://github.com/Menci/vite-plugin-wasm) 或其他社区上的插件来处理。 ::: +### 访问 WebAssembly 模块 {#accessing-the-webassembly-module} + +如果需要访问 `Module` 对象,例如将它多次实例化,可以使用 [显式 URL 引入](./assets#explicit-url-imports) 来解析资源,然后执行实例化: + +```js +import wasmUrl from 'foo.wasm?url' + +const main = async () => { + const responsePromise = fetch(wasmUrl) + const { module, instance } = await WebAssembly.instantiateStreaming( + responsePromise, + ) + /* ... */ +} + +main() +``` + +### 在 Node.js 中获取模块 {#fetching-the-module-in-node-js} + +在 SSR 中,作为 `?init` 导入的 `fetch()` 可能会失败,导致 `TypeError: Invalid URL` 报错。 +请参见问题 [在 SSR 中支持 wasm](https://github.com/vitejs/vite/issues/8882)。 + +以下是一种替代方案,假设项目根目录在当前目录: + +```js +import wasmUrl from 'foo.wasm?url' +import { readFile } from 'node:fs/promises' + +const main = async () => { + const resolvedUrl = (await import('./test/boot.test.wasm?url')).default + const buffer = await readFile('.' + resolvedUrl) + const { instance } = await WebAssembly.instantiate(buffer, { + /* ... */ + }) + /* ... */ +} + +main() +``` + ## Web Workers {#web-workers} ### 通过构造器导入 {#import-with-constructors} @@ -559,7 +601,7 @@ import MyWorker from './worker?worker' const worker = new MyWorker() ``` -Worker 脚本也可以使用 ESM 的 `import` 语句来替代 `importScripts()` —— **注意**,在开发过程中,这依赖于[浏览器原生支持](https://caniuse.com/?search=module%20worker)(目前在 Firefox 中不支持),而在生产版本中,它已经被编译掉了。 +这个 worker 脚本也可以使用 ESM `import` 语句而不是 `importScripts()`。**注意**:在开发时,这依赖于 [浏览器原生支持](https://caniuse.com/?search=module%20worker),但是在生产构建中,它会被编译掉。 默认情况下,worker 脚本将在生产构建中编译成单独的 chunk。如果你想将 worker 内联为 base64 字符串,请添加 `inline` 查询参数: diff --git a/guide/static-deploy.md b/guide/static-deploy.md index 01aa9eea..2f3720e8 100644 --- a/guide/static-deploy.md +++ b/guide/static-deploy.md @@ -337,3 +337,7 @@ $ npx wrangler pages publish dist ## Flightcontrol 使用 [Flightcontrol](https://www.flightcontrol.dev/?ref=docs-vite) 部署静态站点,可以按照 [说明](https://www.flightcontrol.dev/docs/reference/examples/vite?ref=docs-vite) 进行操作。 + +## AWS Amplify 部署 {#aws-amplify-hoisting} + +使用 [AWS Amplify 部署](https://aws.amazon.com/amplify/hosting/) 部署静态站点,可以按照 [说明](https://docs.amplify.aws/guides/hosting/vite/q/platform/js/) 进行操作。 diff --git a/guide/troubleshooting.md b/guide/troubleshooting.md index 46a2d952..760cf031 100644 --- a/guide/troubleshooting.md +++ b/guide/troubleshooting.md @@ -144,9 +144,31 @@ import './Foo.js' // 应该为 './foo.js' 在 Vite 中通过一个哈希值来决定优化后的依赖项是否有效,这个值取决于包锁定的内容、应用于依赖项的补丁以及 Vite 配置文件中影响 node_modules 打包的选项。这意味着,当使用像 [npm overrides](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides) 这样的功能覆盖依赖项时,Vite 将检测到,并在下一次服务器启动时重新打包您的依赖项。当您使用像 [npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) 这样的功能时,Vite 不会使依赖项无效。如果您链接或取消链接一个依赖项,那么您需要使用 `vite --force` 在下一次服务器启动时强制重新预构建。我们建议使用 overrides,它们现在被每个包管理器所支持(还可以参见 [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides) 和 [yarn resolutions](https://yarnpkg.com/configuration/manifest/#resolutions))。 +## 性能瓶颈 {#performance-bottlenecks} + +如果你遇到应用程序性能瓶颈导致加载缓慢,可以在启动 Vite 开发服务器或在构建应用程序时使用内置的 Node.js 调试器来创建 CPU 性能分析文件: + +::: code-group + +```bash [dev server] +vite --profile --open +``` + +```bash [build] +vite build --profile +``` + +::: + +::: tip Vite 开发服务器 +一旦应用程序在浏览器中打开,请等待其完成加载,然后返回终端并按下 `p` 键(将停止 Node.js 调试器),然后按下 `q` 键停止开发服务器。 +::: + +Node.js 调试器将在根文件夹中生成 `vite-profile-0.cpuprofile` 文件,前往 https://www.speedscope.app/,点击 `BROWSE` 按钮上传 CPU 性能分析文件以检查结果。 + ## 其他 {#others} -### Module externalized for browser compatibility {#module-externalized-for-browser-compatibility} +### 为了浏览器兼容性而模块外部化 {#module-externalized-for-browser-compatibility} 当你在浏览器中使用一个 Node.js 模块时,Vite 会输出以下警告: diff --git a/index.md b/index.md index e7d1eec5..0ba59016 100644 --- a/index.md +++ b/index.md @@ -21,6 +21,9 @@ hero: - theme: alt text: 在 GitHub 上查看 link: https://github.com/vitejs/vite + - theme: brand + text: 🎉 ViteConf 23! + link: https://viteconf.org/23 features: - icon: 💡 diff --git a/public/viteconf.svg b/public/viteconf.svg index a01c0bd2..2ca20c23 100644 --- a/public/viteconf.svg +++ b/public/viteconf.svg @@ -1 +1,24 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + +