HMR

在插件中内置了HMR（例如：vitejs/plugin-react）

通过API 开启HMR ```shell export function render() { … }

render()

// 这段代码在生产环境可以被 tree-shaking 优化 if(import.meta.hot){

// 接受模块自身

import.meta.hot.accept((newModule) => { newModule.render() })

}


- 热重载原理
   - 通过websocket 连接本地服务器
   - server端 实时的将修改信息推送到 客户端
   - 客户端 根据信息 发起新的请求，进行模块热替换
<a name="Cq8xJ"></a>
# Glob批量导入
- 懒加载
```shell
const globModules = import.meta.glob('./glob/*.js')
Object.entries(globModules).forEach(([key, fn]) => {
  fn().then((m) => console.log(m.default))
})

直接引入

const globModules = import.meta.globEager('./glob/*.js')
console.log(globModules)

预编译

在本地生成缓存文件（node_modules/.vite），不需要再重新编译
第三方依赖通过 Cache-Control 设置强缓存
CommonJs to ESM。例如：react ```shell import { require_react } from “./chunk-NFTZ4EPM.js”;

// dep:react var react_default = require_react(); export { react_default as default }; //# sourceMappingURL=react.js.map


- bundle files together。例如：lodash-es 有600多个内置模块，通过预构建只需要一个HTTP请求
<a name="AHRfE"></a>
# SSR
> React同构直出方案
> [官方 SSR 示例源码（React版本）](https://github.com/vitejs/vite/tree/main/packages/playground/ssr-)

- 一个典型的 SSR 应用应该有如下的源文件结构：
```shell
- index.html
- src/
  - main.js          # 导出环境无关的（通用的）应用代码
  - entry-client.js  # 将应用挂载到一个 DOM 元素上
  - entry-server.js  # 使用某框架的 SSR API 渲染该应用

entry-server.js ```shell import ReactDOMServer from ‘react-dom/server’ import { StaticRouter } from ‘react-router-dom’ import { App } from ‘./App’

export function render(url, context) { return ReactDOMServer.renderToString( ) }


- **entry-client.js**
```shell
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { App } from './App'

ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('app')
)

index.html

将需要引用 entry-client.js 并包含一个占位标记供给服务端渲染时注入：

<div id="app"><!--app-html--></div>
<script type="module" src="/src/entry-client.js"></script>

server.js

已中间件模式使用vite，结合express

const fs = require('fs')
const path = require('path')
const express = require('express')
const { createServer: createViteServer } = require('vite')

async function createServer() {
  const app = express()

  // 以中间件模式创建 Vite 应用，这将禁用 Vite 自身的 HTML 服务逻辑
  // 并让上级服务器接管控制
  //
  // 如果你想使用 Vite 自己的 HTML 服务逻辑（将 Vite 作为
  // 一个开发中间件来使用），那么这里请用 'html'
  const vite = await createViteServer({
    server: { middlewareMode: 'ssr' } // ssr
  })
  // 使用 vite 的 Connect 实例作为中间件
  app.use(vite.middlewares)

  app.use('*', async (req, res) => {
    // 服务 index.html - 下面我们来处理这个问题
    const url = req.originalUrl

    try {
      // 1. 读取 index.html
      let template = fs.readFileSync(
        path.resolve(__dirname, 'index.html'),
        'utf-8'
      )

      // 2. 应用 Vite HTML 转换。这将会注入 Vite HMR 客户端，
      //    同时也会从 Vite 插件应用 HTML 转换。
      //    例如：@vitejs/plugin-react-refresh 中的 global preambles
      template = await vite.transformIndexHtml(url, template)

      // 3. 加载服务器入口。vite.ssrLoadModule 将自动转换
      //    你的 ESM 源码使之可以在 Node.js 中运行！无需打包
      //    并提供类似 HMR 的根据情况随时失效。
      const { render } = await vite.ssrLoadModule('/src/entry-server.jsx')

      // 4. 渲染应用的 HTML。这假设 entry-server.js 导出的 `render`
      //    函数调用了适当的 SSR 框架 API。
      //    例如 ReactDOMServer.renderToString()
      const context = {}
      const appHtml = await render(url, context)

      // 5. 注入渲染后的应用程序 HTML 到模板中。
      const html = template.replace(`<!--app-html-->`, appHtml)

      // 6. 返回渲染后的 HTML。
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      // 如果捕获到了一个错误，让 Vite 来修复该堆栈，这样它就可以映射回
      // 你的实际源码中。
      vite.ssrFixStacktrace(e)
      console.error(e)
      res.status(500).end(e.message)
    }
  })

  app.listen(5000)
}

createServer()

打包、编译、校验

高级应用

HMR

预编译