Skip to main content

About Vite

任何事的前提，都是花时间认认真真地看一遍文档。看任何人的总结，都无法比自己看一遍更有效果。

总结对 Vite 印象比较深刻的几点：

  • 底层使用了 Rollup 打包代码，可以借助 Vite 的源码参考/学习优秀的 Rollup 使用技巧。

  • 支持 HMR 热模块更新，个人最早在 React 技术栈的 umi 里见识到 HMR 对本地开发服务的响应速度有质的提升。

  • 打包器 esbuild 是基于 Go 开发的，速度很快，官方说速度比纯 JS 快 10-100 倍。

  • 预封装了很多开发常备的依赖功能，例如针对对 css 的 less/sass/postcss 等。但注意要在 vite.config.js 里面去统一配置，不推荐单独使用诸如 postcss.config.js 等配置文件。

  • 发音是：我们(we) 加尾音 t。不是：Why 加尾音 t。官方这样描述：Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）。

  • 可以支持 Vue 和 React 两套技术栈开箱即用。当然，不能一起使用，只能选其一。跨技术栈的最好方式是微前端 + 通用代码模块化。

使用 tailwindcss​

首先，tailwindcss 官网关于 Vite & Vue 的指引是不准确的，按着去配会没有效果（不排除日后该指引会修复）。 https://tailwindcss.com/docs/guides/vite#vue

原因分析：

  • 首先 tailwindcss 是依靠 postcss 才能使用的，因此要自定义 postcss。
  • 而由于 Vite 内置了关于 postcss 的功能，因此要对默认的 postcss 配置作自定义，必须在 vite.config.js 里面去修改。

Step-1 安装依赖​

npm install --save-dev autoprefixer tailwindcss

Step-2 添加 postcss 配置​

正确有效的 vite.config.js 配置如下：

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        require('autoprefixer'),
        require('tailwindcss')
      ]
    }
  }
})

注意点：

Step-3 全局样式文件引用 tailwindcss​

在 src/assets/base.css 或 src/assets/main.css 的文件开头添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

使用 css module​

Vite 自带该功能，以下注意点：

若使用 less 等预处理器，则 import 时一定要包含文件后缀：

/* Bad */
import css from './styie.less'
/* Good */
import css from './style.module.less'

export default render({ text }) {
  return <div className={css['title']}>{text}</div>
}

样式文件一定要 .module.less 后缀。

默认是生成新的类名，例如 _title_1ipn2_4 以实现样式的局部作用域。

相关文档：https://cn.vitejs.dev/guide/features.html#css-modules

配置 alias @ 指代 src 目录的绝对路径​

我们在 js 引入文件时，尽量不使用相对路径。同级或子级除外。

这个路径别名对样式文件里的 import 也都有效，在组件局部样式中引入全局样式文件时十分好用：

// Bad: 优化前
@import '../../../styles/var.less';
// Good: 优化后
@import '@/styles/var.less';

升级 Vite​

以 v3 升级 v4 为例，我们除了安装 vite@^4.0.0 以外，还要将官方插件都升级到支持 Vite 4 的版本：

    "@vitejs/plugin-vue": "^4.4.0",
    "@vitejs/plugin-vue-jsx": "^3.0.2",
    "vite": "^4.4.10"

添加 Markdown 支持​

vite-plugin-md​

https://github.com/antfu/vite-plugin-md

注意该插件(v0.21.5)有指定的依赖项，版本如下：

{
  "peerDependencies": {
    "@vitejs/plugin-vue": ">=2.3.4",
    "vite": "^4.0.0 || ^3.0.0"
  }
}

Vite 生态发展得太快，该插件的版本更新跟不上脚步，在有同类替代品的情况下持保留态度。