Vite 基础之 Vite 高级应用的 HMR 热更新、glob-import 批量导入、预编译、Vite SSR 应用及 SSR 静态站点导出

一、Vite 高级应用的 HMR 热更新、glob-import 批量导入、预编译、Vite SSR 应用及 SSR 静态站点导出

1. Vite 中的热更新，通过 Vite 命令行生成的项目默认都开启了热更新，同时 Vite 中的热更新是根据不同框架去实现的。HMR API，对于 import.meta.hot，通过 vite build 去 build 代码之后，在 build 的 production 的 bundle 里面是没有 hot 代码的，对于发布线上的代码是没有 hot 的需要，需要判断。对于 import.meta.hot.accept，vite 推了一个热更新，它就会接收到这个热更新，main.js，代码如下：

import './style.css'

function render() {
   
  document.querySelector('#app').innerHTML = `
    <h1>Hello Vite!</h1>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
  `;
}

render();

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

2. Vite 中的 glob-import，具备批量导入的功能，可以使用 import.meta.glob。如果直接编译引入，可以使用 globEager。比如批量导入 glob 目录下的所有文件，代码如下：

const globModules = import.meta.glob('./glob/*');
// const globModules = import.meta.glob('./glob/*-[0-9].js');
// const globModules = import.meta.globEager('./glob/*');

Object.entries(globModules).forEach(([k, v]) => {
   
  v().then(m => console.log(k + ':' + m.default));
});

3. Vite 中的预编译，会将非 ES Module 的文件编译成 ES Module，这是因为 Vite 依赖浏览器原生的 ES Module 加载方式。在 vite.config.js 中，optimizeDeps 可以指明项目中哪些文件需要预编译，哪些不需要预编译，include 是需要预编译，exclude 是不需要预编译。预编译也会将零散的文件打包到一起，代码如下：

import {
    defineConfig } from