Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。那么 Vite 究竟有什么魅力？
Vite 概念
Vite 是一个面向现代浏览器的更轻, 更快的 web 应用开发工具
它基于 ECMAScript 标准原生模块系统 (ES Modules) 实现
它的出现是为了解决 webpack 在开发阶段使用 webpack-dev-server 冷启动时间过长, 另外, webpack-hmr 热更新反应速度慢的问题
使用 Vite 创建的项目就是一个普通的 vue3 的应用, 没有太多特殊的地方, 相比基于 vue-cli 创建的项目, 也少了很多的配置文件和依赖:
- Vite 项目依赖
- Vite (命令行工具)
- @vue/compiler-sfc (用来编译项目中的 .vue文件, vue2 中使用的是 vue-template-compiler)
注意, Vite 目前只支持 vue3.0的版本, 创建项目的时候通过指定使用不同的模板也可以支持其他的框架
基础使用
- vite server
在运行 vite serve 的时候, 不需要打包, 直接开启一个 web 服务器, 当浏览器请求服务器, 例如请求一个单文件组件, 这个时候在服务器端编译单文件组件, 然后把编译的结果返回给浏览器, 注意这里的编译是在服务器端, 另外, 模块的处理是在请求到服务器端处理的
我们再来回顾一下 vue-cli 创建的应用
它在启动开发的 web 服务器的时候, 使用的是 vue-cli-service serve, 当运行 vue-cli-service serve 的时候, 它内部会使用 webpack, 首先去打包所有的模块, 如果模块比较多的话, 打包速度会非常的慢, 把打包的结果存储到内存中, 然后才会开启开发的 web 服务器, 浏览器请求 web 服务器, 把内存中打包的结果直接返回给浏览器, 像 webpack 这类工具, 它的做法是将所有的模块提前编译打包进 bundle 里, 换句话说, 不管模块是否被执行, 是否使用到, 都要被编译和打包到 bundle 里, 随着项目越来越大, 打包后的 bundle 也越来越大, 打包的速度自然也就越来越慢。
Vite 利用现代浏览器原生支持的 ES Module 模块化的特性, 省略了对模块的打包, 对于需要编译的文件, 例如单文件组件, 样式模块等, Vite 采用的另一种模式, 即时编译, 也就是说, 只有具体去请求某个文件的时候才会在服务端编译这个文件, 所以, 这种即时编译的好处主要体现在按需编译速度会更快。
HMR
- Vite HMR
立即编译当前所修改的文件 - Webpack HMR
会自动以这个文件为入口重写 build 一次, 所有的涉及到的依赖也都会被加载一遍
Vite生产环境为什么选择Rollup做构建工具
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。
Vite为什么不用Rollup的热更新
Vite开发模式单独实现了一套热更新（HMR - Hot Module Replacement），可是从[Rollup Awesome]中可以发现，Rollup有热更新插件[nollup]。为什么Vite不用Rollup的热更新呢？
从Vite的README，我们可以发现：
Vite was created to tackle native ESM-based HMR. When Vite was first released with working ESM-based HMR, there was no other project actively trying to bring native ESM based HMR to production.
也就是说Vite是第一个发布基于纯ESM的热更新。当时Rollup还没有纯ESM的热更新。
Vite为什么不用Webpack
Webpack和Rollup功能差不多，以前有种说法是应用开发用Webpack，库开发用Rollup。但是现在Webpack也支持Tree shaking，Rollup也有热更新，而且都有强大的插件开发功能。二者的功能差异越来越模糊。
二者更多的区别是在写法上。
如下是Rollup的配置文件：
// rollup.config.js
import babel from 'rollup-plugin-babel';
export default {
input: './src/index.js',
output: {
file: './dist/bundle.rollup.js',
format: 'cjs'
},
plugins: [
babel({
presets: [
[
'es2015', {
modules: false
}
]
]
})
]
}
下面是webpack的配置文件：
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
'index.webpack': path.resolve('./src/index.js')
},
output: {
libraryTarget: "umd",
filename: "bundle.webpack.js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
};
可以看出：
- Rollup使用新的ESM，而Webpack用的是旧的CommonJS。
- Rollup支持相对路径，webpack需要使用path模块。
- Rollup使用起来更简洁，并且Rollup打出更小体积的文件，所以Rollup更适合Vite。
