一看就懂的Vite使用和原理分析，提高开发效率有妙招

前言

有开发经验的小伙伴都知道，在运用Webpack作为基础的各类开发工具前，咱们需求装备很多Webpack相关的环境装备，比如entry、output、plugins等。Webpack装备进程繁琐不说，随着运用的累积，整个项目的编译会越来越慢。

得益于浏览器对ES Module的支撑，呈现了依据浏览器原生ES imports的开发服务器：Vite。

因其原生 ES 模块导入办法，能够实现闪电般的冷服务器发动,大大减少了程序员在前端开发进程中的时间耗费。

尤雨溪的微博原话是这样解说的：

Vite，一个依据浏览器原生 ES imports 的开发服务器。运用浏览器去解析 imports，在服务器端按需编译回来，彻底跳过了打包这个概念，服务器随起随用。一起不只有 Vue 文件支撑，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对出产环境则能够把同一份代码用 rollup 打。尽管现在还比较粗糙，但这个方向我觉得是有潜力的，做得好能够彻底解决改一行代码等半响热更新的问题。

怎么运用Vite呢？

那么咱们先来看一下怎么运用Vite初始化一个项目，留意：Node需求12.0.0版别以上。

翻开命令行输入（my-app为project-name）：

$ npm init vue@latest my-app

依据提示挑选vue模板，然后经过以下指令发动项目：

$ cd my-app
$ npm install
$ npm run dev

作用如下：

项目结构如下：

跟Vue Cli构建的项目不同的是，装备文件变成了vite.config.js，具体的装备项能够检查官方文档。

Vite常见的装备

咱们来看看在vite.config.js文件中的常见装备有哪些：

base

这是开发或出产环境服务的公共基础途径，打完包的/dist/index.html文件中引进资源也是以这个途径为基础。

resolve.alias

为了便利在项目代码内部引用文件时，书写途径便利而设置的途径别号。

当运用文件系统途径的别号时，请一直运用绝对途径。 相对途径的别号值会原封不动地被运用，因而无法被正常解析。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 resolve: {
  // 途径别号
  alias: {
   '@': path.resolve(__dirname, '/src')
  }
}
})

resolve.extensions

在导入文件时能够省掉的扩展名列表。

导入时想要省掉的扩展名列表。留意，不主张忽略自定义导入类型的扩展名（例如：.vue），由于它会影响 IDE 和类型支撑。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 resolve: {
  // 途径别号
  alias: {
   '@': path.resolve(__dirname, '/src')
  },
  //文件类型，默认值
  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
}
})

server

开发服务器选项的装备，这个装备项内置多种开发时用的选项。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 resolve: {
  // 途径别号
  alias: {
   '@': path.resolve(__dirname, '/src')
  },
  //文件类型，默认值
  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
},
 server: {
  // 指定服务器应该监听哪个 IP 地址
  host: '127.0.0.1',
  // 指定开发服务器端口
  port: 8080,
  // 在开发服务器发动时自动在浏览器中翻开应用程序
  open: true,
  // 为开发服务器装备自定义代理规矩
  proxy: {
   '/api': 'http://localhost:4567'
  }
}
})

Vite原理分析

ES 模块是 Vite 的基础，经过下图浏览器对ES 模块的支撑状况，咱们能够知道除了IE 浏览器之外，干流浏览器较新的版别都现已支撑了ES 模块。

ES 模块的特点是，在script标签中设置type=module 之后，浏览器能够直接运用export和import的办法实现导入模块和导出模块了。作用如下：

//a.js
export const message = 'hello world';
​
<script type="module">
 import { message } from './a.js'
</script>

当script标签中的代码执行时，浏览器会发起http恳求取得a.js。

而Vite是怎么运用ES模块的呢？

发动咱们运用Vite构建的项目，在浏览器翻开后，翻开控制台，点击Network，作用如下：

script设置了 type=module 属性，并且 src 引进 /src/main.js，翻开main.js作用如下：

再检查vue.js和App.vue的加载途径，作用如下：

代码从http://localhost:3000/node_modules/.vite/vue.js?v=5484949c取得了createApp办法，并且从http://localhost:3000/src/App.vue取得了根组件。Vite省去了打包的进程，直接从浏览器中按照ES 模块的办法取得了代码。

Webpack的编译打包办法很难做到按需加载，会将所有的资源打包到一个boundle文件中。而随着项目的业务内容增多，打包的boundle文件也会越来越大。为了减小boundle的体积，引进import()的办法来实现按需加载，可是这样的办法引进的代码仍是需求提早打包。后来运用webpack的tree shaking功用删除没有运用的代码块。

但以上的办法都没有Vite优雅。尽管Vite的办法现在只能用于开发环境，但Vite真实做到了按需编译，并且不需求提早打包，这样大大提高了咱们开发的效率。