Day 26 介绍 vite

vite 是 Vue.js 的作者所做的一个新的 bundler ，如果你有用过应该会知道，它最特别的部份是它在开发时不做打包，而是用原生浏览器支援的 es6 module 来载入相依性，这个概念其实也不算是最早的，在那之前还有个 snowpack 也是采用不打包的型式，不过这样的概念应该是跟着 vite 红起来的

那不打包的作法有什麽好处呢？

• 若要打包的话 webpack 就必须要在一开始走访所有的档案来取得相依性，这使得启动的时间会加长
• hot reload 时也不需要额外的检查档案的相依性，让浏览器去处理就行了

不过 vite 在 production build 时还是会做打包，而且用的是 rollup ，因为如果像在开发时不打包，那浏览器就必须要发出一个个的 request 来取得各个 js 档，这样才知道下一个相依性在哪，才能再取得下一个，而且实际环境的浏览器也可能还不支援 module

还有它在开发时也会用 rollup 打包套件的部份，为了加快载入速度，比如像 vue 自身，因为这些套件在开发时通常不会去动到，只要打包一次，之後载入也只要载入一个档案就行了

安装与使用

最方便的应该是用 create-vite-app 来建一个 vite 的专案

$ create-vite-app vite-app

预设会建立的是 Vue 的专案，毕竟是 Vue 的作者做的，不过也有其它样版，像 React ：

$ create-vite-app --template react vite-app

如果要自己安装的话也是可以的，只要建一个专案并安装 vite 就行了

$ yarn add --dev vite

它在这部份有点像 Parcel (虽然底下的原因并不是) ，你需要放一个 index.html 在专案的目录，并用 type="module" 的形式引入你的 js 才行，像：

<script type="module" src="/src/index.js"></script>

vite 启动後只有开启它的 server 与找可以预先打包的套件而已，它实际处理程序码要等到浏览器的 request 进来，也就是要求 /src/index.js 时

另外稍微提一下 snowpack ， snowpack 跟 vite 最大的差别应该是 snowpack 其实在 production build 时预设也是不会把程序码打包的，这部份是 plugin 在做的，而它目前只有 webpack 的 plugin

下一篇是 gulp 这个老牌的 task runner