Vite 对 Vue 的支持和预打包

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」。

1. Vite 对 Vue 的支持

下面我们在项目的 src 目录下新建 vue 文件夹，在 vue 文件夹下新建 App.vue 文件，内容如下：

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '我是 App'
      }
    }
  }
</script>

<style scoped>
  h2 {
    color: white;
  }
</style>

这样我们就已经编写好了 App.vue 组件，下面准备使用它。那么在使用这个 Vue 的组件之前，我们得先安装 Vue，这里我们安装 Vue 3：

npm install vue@next

安装完 Vue 之后，我们在 src/main.js 文件中添加代码，从 vue 中导入 createApp() 函数，导入刚才创建的 App.vue 组件，再通过 createApp() 函数创建根组件为 App.vue 的应用对象，并挂载到 id 为 app 的 HTML 元素上：

那么，我们再去 index.html 中添加这个 id 为 app 的元素：

然后，我们执行 npx vite 启动项目，看看 Vite 是否默认支持 .vue 文件，你会发现终端中报错了：

这是因为当前 Vite 不能成功解析 .vue 文件中的内容。报错信息中也提示我们去安装 @vitejs/plugin-vue 来处理 .vue 文件。所以，我们来安装 @vitejs/plugin-vue 这个插件：

npm i -D @vitejs/plugin-vue

安装完成后，因为这是一个插件，所以还需要进行配置。如何配置呢？我们需要在项目目录下新建 vite.config.js 文件，添加如下内容：

const vue = require('@vitejs/plugin-vue')

module.exports = {
  plugins: [
    vue()
  ]
}

这里拿到的 vue 是一个函数，所以需要调用它。上面导入 vue() 函数时，也可以采用 ESM 的导入方式：

import vue from '@vitejs/plugin-vue'

注意：从 vue 3.2.13 版本开始，以及 @vitejs/plugin-vue 1.9.0 版本开始，@vue/compiler-sfc（前面在讲 Webpack 时讲过，它是用来对 .vue 文件做编译的东西）就不需要再由我们手动安装了。也就是说，如果你使用的 vue 是 3.2.12 版本或更早的版本，那么在安装 @vitejs/plugin-vue 的同时，还需要安装 @vue/compiler-sfc（因为 @vitejs/plugin-vue 依赖 @vue/compiler-sfc），否则，会报错：

• 使用 vue 的 3.2.12 版本，未安装 @vue/compiler-sfc：

  

然后，我们再来执行 npx vite 启动项目看下效果：

这次就没有问题了，再来看下浏览器中的效果：

可以看到，页面中成功渲染出了 App.vue 组件。所以你会发现，相比于 Webpack，Vite 的配置就简单多了。

2. Vite 的预打包

前面成功运行 Vue 的代码后，我们再来打开项目目录下的 node_modules 文件夹，你会发现里面有一个 .vite 目录，我们先删掉它。再来执行 npx vite 命令打包项目：

你会发现，（在第一次打包时），Vite 会对我们项目中来自 node_modules 文件夹下的 lodash-es 和 vue 两个库做预打包，预打包之后会将它们放到 node_modules/.vite 文件夹中：

预打包的好处是，如果我们现在把项目停掉了，下次再执行 npx vite 打包项目时，之前预打包过的东西（这里即 lodash-es 和 vue）就不用再进行打包了。而且，第二次往后的打包耗时也会较第一次更少（因为有些包已经预打包好了）：

当然，Vite 在打包时会判断之前已经预打包过的内容是否做了修改，如果有做修改，那么会重新进行预打包。但是，在开发中，我们一般不会直接去修改 node_modules 下的包（如果你修改了其中的某个包，之后如果再安装这个包就会把你修改的内容覆盖掉的）。也正因为在真实开发中，我们基本上不会修改 node_modules 中的内容，所以 Vite 就干脆对这里面的内容做预打包，那么下次打包时就不需要再对这里面的内容做打包了。这也是 Vite 比较快的原因之一（即它会做预打包）。

小结一下：

• Vite 为 Vue 提供了第一优先级的支持：

  • 如果你编写了 Vue 3 的单文件组件，那么需要安装 @vitejs/plugin-vue 以获得支持；
  • 如果你编写了 Vue 3 的 JSX 代码，那么需要安装 @vitejs/plugin-vue-jsx 以获得支持；
  • 如果你编写了 Vue 2 的代码，那么需要安装 underfin/vite-plugin-vue2 以获得支持；

• 安装对 Vue 3 SFC 做支持的插件：

  npm install @vitejs/plugin-vue -D
  

  然后在 vite.config.js 文件中配置插件：

  import vue from '@vitejs/plugin-vue'
  
  module.exports = {
    plugins: [
      vue()
    ]
  }