「动手试试」vite使用初体验以及初始化一个vue3项目

ys
1,040 阅读6分钟

vite

随着尤大在2022.1.20发的知乎文章里宣布 Vue 3 将成为新的默认版本

vite在未来一年里应该会有更多的开发者尝试使用它进行vue3，甚至react项目的开发

现状

“ Vite是一种新型前端构建工具，能够显著提升前端开发体验。”

2020年12月发布了vite2.0版本

然后就看到了尤大在知乎的这条回复

image.png

现在看来确实如尤大年初所预料的

截止现在2022年1月

vite脚手架搭建的vite项目默认使用2.7.2版本

已经有非常多主vue框架的公司尝试去使用vite替代webpack进行开发尝试

周边生态也逐渐完善

一些好用的vite插件比如

unplugin-vue-components（自动按需引入组件）

unplugin-auto-import（自动按需引入hooks），

plugin-vue-jsx（提供 Vue 3 JSX 支持）

plugin-react（提供完整的React 支持）

plugin-legacy(为打包后的文件提供传统浏览器兼容性支持）

比如vite生态的VitePress中文网

替代了原来的vuePress被人更多人使用

也比如很多人期待的，升级到vue3版本的nuxt3

对比webpack,优势在哪（开发模式）

如同vite文档说的第一句

“ Vite是一种新型前端构建工具，能够显著提升前端开发体验。”

vite优化的是前端开发体验

那对比webpack,使用vite开发时，“爽在哪里呢”

先看看webpack在devSever下的模式是怎么样构建的

webpack：

image.png （图片来源：vite中文网）

可以看到webpack在本地开启devSever的时候，是需要先对一整个项目进行构建，，就像一颗树一样需要遍历到每一颗根节点。

可想而知，如果没有相关优化，在一些大型的项目里启动devSever，是非常消耗时间的。

webpack的HMR也一样会受到影响，因为每次修改都会使相应的模块重新构建。

不过这样有个好处就是开发模式下的代码与生产模式打包出来的代码差异性较小，对浏览器的兼容性比较好。

（当然，优化devSever首次构建，可以为label-loader等消耗比较大的loader开启缓存，exclude减少需要打包的范围等等）

vite：

image.png （图片来源：vite中文网）

在vite中，由于利用了浏览器原生的ES module的方式引入js代码，可以使得我们本地的代码可以直接在浏览器中运行，

不需要像webpack一样进行整个项目的构建，所以启动速度是毫秒级的“快”，

当然vite也是会进行预构建的，因为像一些npm依赖，并不都是ES module方式进行模块化的，这就需要vite具备一个预构建的能力

为此，尤大创造了基于go语言的esbuild（比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。）

在项目启动时，会对依赖进行预构建，并且会缓存这个构建结果，在新增或修改依赖时，会检查到新依赖进行重新打包。

而对于项目模块，vite把更多的工作交给了浏览器。

浏览器会通过http请求源码，esbuild进行转换并按需提供源码。

所以vite在开发模式下实质是利用了浏览器支持ES module这一特点进行的优化，这与其它构建工具是不同的思路。

当然，这种方式非常依赖于浏览器的兼容性，不过这似乎不用太担心，因为vite在打包时还是可以以传统的方式引入js代码@vitejs/plugin-legacy 。

就像vue3用proxy替代了Object.defineProperty()一样

vite正在做超前于标准的事情，而这些事情未来一定会成为标准。

1.3 初始化vue3项目

接下来使用vite去初始化一个vue3项目

初始化一个vue3项目（npm）

npm init vite@latest
​
npx: 6 安装成功，用时 3.087 秒
√ Project name: ... vite-vue3-demo
√ Select a framework: » vue
√ Select a variant: » vue

npm i 安装依赖

package.json

{
  "name": "vite-vue3-demo",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "vite": "^2.7.2"
  }
}

可以看到默认的vite版本是2.7.2，vue3版本是3.2.25，还有一个用于开发环境的插件plugin-vue

我们给dev和preview加上--host，可以看到当前启动network地址

配置路径别名

// vite.config.js
​
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
​
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: '@', replacement: resolve(__dirname, "./src") },
    ],
  },
})
​

使用插件对组件和hooks自动导入（element-plus）

参考大佬的文章

[尤大推荐的神器unplugin-vue-components,解放双手!以后再也不用呆呆的手动引入(组件,ui(Element-ui)库,vue hooks等)]  juejin.cn/post/701244… 

主要是利用unplugin-vue-components，unplugin-auto-import这两个插件

这里我使用element-plus做示范

使用ElementPlusResolver这个Resolver，当然你也可以自定义

注意：unplugin-vue-components虽然也按需引入了element-plus对应的样式文件

但是一些全局组件样式和hooks似乎还是没有很好的支持

还是得在main.js中全局引入

// import 'element-plus/dist/index.css

解决样式丢失问题

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from "unplugin-auto-import/vite";
​
// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element.scss" as *;`,
        javascriptEnabled: true
      },
    },
  },
  plugins: [
    vue(),
    // hooks自动引入
    AutoImport({
      imports: ["vue", "vue-router"],
      resolvers: [ElementPlusResolver()],
      dts: "src/auto-imports.d.ts",
    }),
    // 组件自动引入
    Components({
      // 指定组件位置，默认是src/components
      dirs: ['src/components'],
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass",
        }),
      ],
      extensions: ['vue'],
      dts: "src/components.d.ts",
    }),
  ],
  resolve: {
     alias: [
      { find: '@', replacement: resolve(__dirname, "./src") },
    ],
  },
});
​

1.4 个人开发感受

就像尤大在知乎里说的，vite的诞生并不是为了干掉webpack。

我认为，vite应该是给前端开发者们提供了多一个选择。

就我个人使用vite进行开发的感受就是：快。

快速的启动，快速的热更新。

但是还是有个小问题，由于vite的devSever是依靠浏览器请求，esbuild进行转换并按需提供源码。

这会导致在浏览器中首次打开页面会有一个等待时间

这应该是esbuild进行转换后并响应消耗的时长。

这在首次打开页面时是比较明显的。

（当然打包后的静态项目不会出现这样的问题。）

vite抽象出来的api配置都比较简单，无需像之前一样，繁琐的配置webpack。

还有日益丰富的插件，会使搭建一个vite项目变得非常简单。

不过就目前来说，还是没办法撼动webpack的地位，

webpack给予了开发者更多的自由定制的能力，

vite给予了开发者开发上的体验。

2022年不出意外的话应该会有更多的开发者选择用vite作为前端构建工具。

avatar
文章
阅读
粉丝