Vite 为什么启动非常快

Vite 之所以启动非常快，主要有以下几个原因：

1. 基于 ES Modules：Vite 利用了 ES Modules 的特性，通过原生的 JavaScript 模块机制进行开发，不需要打包整个应用，而是以原生 ES Module 的形式直接加载模块。这避免了传统打包工具中大量的模块重复打包、解析和编译等过程，从而加快了启动速度。

2. 基于浏览器原生的 ESM：Vite 在开发模式下利用了浏览器原生的 ES Module 支持，可以直接在浏览器中运行未经打包的代码，利用浏览器自身的模块解析能力，避免了打包过程，减少了开发环境中的构建时间，因此启动更快。

3. 按需编译：Vite 会根据页面的实际需求，只编译和加载当前页面所需的模块，而不是像传统的打包工具一样将整个应用打包成一个 bundle。这种按需编译的方式可以减少编译和打包的时间，使得启动更加迅速。

4. 缓存：Vite 会在开发过程中缓存已经编译过的模块，当模块发生改动时，只重新编译改动的模块，而不是重新编译整个项目。这种缓存机制有效地减少了不必要的重复编译，提高了开发效率和启动速度。

5. HMR（热模块替换）：Vite 使用了微型的开发服务器，在开发过程中启用了热模块替换（HMR），可以在代码发生变化时实时更新页面，而无需刷新整个页面。这使得开发过程中的修改立即生效，减少了等待时间，加快了开发效率。

综上所述，Vite 之所以启动非常快，主要是因为采用了基于 ES Modules、按需编译、缓存和 HMR 等高效的开发机制，使得开发过程更加流畅和高效。

• 开发环境使用Es6 Module，无需打包，非常快
• 生产环境使用rollup，并不会快很多

ES Module 在浏览器中的应用

<p>基本演示</p>
<script type="module">
    import add from './src/add.js'

    const res = add(1, 2)
    console.log('add res', res)
</script>
<script type="module">
    import { add, multi } from './src/math.js'
    console.log('add res', add(10, 20))
    console.log('multi res', multi(10, 20))
</script>

<p>外链引用</p>
<script type="module" src="./src/index.js"></script>

<p>远程引用</p>
<script type="module">
    import { createStore } from 'https://unpkg.com/redux@latest/es/redux.mjs' // es module规范mjs
    console.log('createStore', createStore)
</script>

<p>动态引入</p>
<button id="btn1">load1</button>
<button id="btn2">load2</button>

<script type="module">
    document.getElementById('btn1').addEventListener('click', async () => {
        const add = await import('./src/add.js')
        const res = add.default(1, 2)
        console.log('add res', res)
    })
    document.getElementById('btn2').addEventListener('click', async () => {
        const { add, multi } = await import('./src/math.js')
        console.log('add res', add(10, 20))
        console.log('multi res', multi(10, 20))
    })
</script>