Vite 为什么启动非常快

说一说 Vite

Vite 是什么

• 一个前端打包工具，Vue 作者发起的项目
• 借助 Vue 的影响力，发展较快，和 webpack 竞争
• 优势：开发环境下无需打包，启动快

参考：https://v3.cn.vuejs.org/guide/installation.html#vite

Vite 为何启动快？

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

ES6 Module 基本使用，文件 /src/print.js

export default function (a, b) {
  console.log(a, b)
}

文件 /src/add.js

import print from './print.js'

export default function add(a, b) {
  print('print', 'add')
  return a + b
}

测试文件 test.html

<p>基本演示</p>

<script type="module">
  import add from './src/add.js'

  const res = add(1, 2)
  console.log('res add', res)
  // print add
  // res add 3
</script>

在开发环境下，Vite 就是利用 <script type="module"> 能在浏览器中直接运行的方式，无需打包所以启动很快，而 Webpack 总是会先把代码转为 ES5 才运行，所以启动慢