Frontend Academy · 课时

Vite：插件系统与 SSR 模式

使用 transform 和 load 钩子编写 Vite 插件，集成第三方插件，并通过 ssrBuild 选项配置 Vite 进行服务器端渲染。

Vite：插件系统与 SSR 模式 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

Vite 为何胜出

Vite（法语意为“快速”）由 Evan You 创建。开发时，它通过原生 ES 模块直接提供未打包的源文件，实现即时冷启动。生产环境使用 Rollup 进行打包。它的开发体验比 Webpack 快得多。

Vite 的开发服务器如何工作

现代浏览器原生支持 ES 模块。Vite 会原样提供源文件，并按需转换 TypeScript/JSX。不进行打包，就无需等待冷启动。

热模块替换

HMR 可以在不重新加载页面的情况下替换模块。Vite 的 HMR 基于 ESM 构建，速度比 Webpack 快得多。大多数框架（React、Vue、Svelte）都能接入它，实现保留状态的组件级更新。

Vite 配置基础

通过项目根目录中的 vite.config.ts 进行配置。

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

插件系统

Vite 插件是 Rollup 插件的扩展，并为开发服务器提供额外钩子。插件是一个对象，也可以是一个返回对象的函数，其中包含带名称的钩子。

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

关键钩子

transform(code, id)：修改文件内容（例如编译 MDX、注入环境变量）。load(id)：为虚拟模块提供内容。resolveId(source)：自定义模块解析。configureServer(server)：向开发服务器添加中间件。

常用插件

@vitejs/plugin-react（React + 快速刷新）。@vitejs/plugin-vue。vite-plugin-pwa。vite-plugin-svgr（将 SVG 作为组件导入）。vite-plugin-checker（在覆盖层中运行 TypeScript / ESLint）。vite-plugin-mkcert（本地 HTTPS）。

Vite SSR 模式

Vite 通过底层原语支持服务器端渲染。Nuxt、SvelteKit、Remix 和 Astro 等框架都构建于其之上。要自定义 SSR，请参阅 Vite 的 SSR 指南。

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

为 SSR 构建

需要进行两次构建：客户端构建和服务器构建。vite build --ssr entry-server.ts 会输出服务器包。

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

环境变量

import.meta.env.MODE 的值为 'development' 或 'production'。带有 VITE_ 前缀的自定义变量会被暴露。

CSS 处理

Vite 开箱即用地处理 CSS、CSS Modules（foo.module.css）、PostCSS（自动发现 postcss.config.js）以及 CSS 预处理器（Sass、Less、Stylus）。通过插件注入关键 CSS。

Vite、Webpack 与 Turbopack 对比

Vite：基于 ESM 的开发、使用 Rollup 构建、生态广泛。Webpack：庞大的传统工具，可配置性更强，但速度更慢。Turbopack（Vercel）：基于 Rust、兼容 Webpack，目前与 Next 捆绑。对于新项目：单页应用使用 Vite，Next 特定项目使用 Next/Turbopack。

快速检查

为什么 Vite 开发服务器的冷启动比 Webpack 快得多？

回顾：Vite

基于 ESM 的开发服务器：即时冷启动和快速 HMR。生产环境使用 Rollup。插件可以扩展 Rollup 的钩子（transform、load、resolveId），以及 Vite 特有的钩子（configureServer、handleHotUpdate）。通过 createServer + middlewareMode 使用 SSR 模式；使用 --ssr 进行构建。提供 PWA、MDX、SVGR 和 mkcert 插件。使用 import.meta.env 读取环境变量。内置 CSS Modules、PostCSS 和预处理器。

常见问题解答

「Vite：插件系统与 SSR 模式」课时是免费的吗？

是的 — 「Vite：插件系统与 SSR 模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Vite：插件系统与 SSR 模式」这节课中我会学到什么？

使用 transform 和 load 钩子编写 Vite 插件，集成第三方插件，并通过 ssrBuild 选项配置 Vite 进行服务器端渲染。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Vite：插件系统与 SSR 模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy