vite2.0配置清單

vite 簡介

vite 是 vue 作者尤雨溪基於 esm 實現本地腳手架工具，最大的特點是速度快，但是不兼容 IE 11。

兼容性查詢地址

vite 腳手架常用設置

vite 的設置文件名為 vite.config.js，如果需要類型提示的話也可以使用 vite.config.ts。vite 更改完設置之后無需重啟服務即可生效，這個可比 webpack 舒服太多了。

配置路徑別名

import path from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

設置完成后即可在項目中使用

import HelloWorld from '@/components/HelloWorld.vue'

base 路徑設置

這個跟 webpack 還有 vue-cli 不同，如果不自己設置的話，線上是無法成功加載資源文件的。

const isProduction = process.env.NODE_ENV === 'production'

export default defineConfig({
  base: isProduction ? './' : ''
})

css 預處理器設置

vite 使用 css 預處理很簡單，只要安裝對應的依賴就行了，不需要額外的 loader。

比如使用 less: yarn add less -D。

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true // 使用 less 編寫樣式的 UI 庫（如 antd）時建議加入這個設置
      }
    }
  }
})

代理設置

設置本地跨域請求的，方式基本跟 vue-cli 的代理設置一樣。

export default defineConfig({
  server: {
    open: true, // 如果需要在服務啟動后自動打開頁面可以打開這個設置
    proxy: {
      '/api': {
        target: 'www.mockUrl.com',
        changeOrigin: true
      }
    }
  }
})

打包設置

vite 在 build 的時候默認會進行壓縮計算，但 vite 實際上不提供 gzip 壓縮功能，所以不需要讓他花時間算壓縮后大小，關掉這個設置可以提升打包速度。

export default defineConfig({
  build: {
    brotliSize: false // 默認為 true
  }
})

打包優化

在項目過大或者帶寬比較吃緊的情況下，我們就不可避免地需要對其進行優化了。

按需加載

webpack 上 UI 庫的按需加載一般是使用螞蟻開發的一個 babel 插件，而 vite 本身不需要 babel，所以也有自己的插件。vite-plugin-style-import 這個包也是我在折騰 element-plus 時看到的，在他的 github也講了很多其他 UI 庫的按需加載，推薦使用！

import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    styleImport({
      libs: [
        {
          // 這里使用的是 react 版的 antd，如果需要用到其他的庫，可以看看文檔
          libraryName: 'antd',
          esModule: true,
          resolveStyle: name => {
            return `antd/es/${name}/style/index`
          }
        }
      ]
    })
  ]
})

其他的工具庫可以找找看他支不支持按需加載，比如 lodash 自家提供的 lodash-es 就是用 esm 寫的，直接 import {} from 'lodash-es' 即可實現按需加載。

組件、路由懶加載

在 webpack 中，可以使用 () => import() 的方式實現懶加載，但是在 vite 中，這樣的方式如果想批量引入的話就會導致打包后沒有在代碼中直接引入的組件丟失！所以在單個的時候可以使用，但是批量引入就得使用 vite 提供給的 import.meta.glob() 方法實現了

const routes = [{ name: 'Home', path: '/' }]

const modules = import.meta.glob('./views/**/index.tsx')

Object.entries(modules).forEach(([key, pageFn]) => {
  const target = routes.find(route => {
    const { name, path } = route
    // 這里我的路由文件夾層級規划是根據路由路徑關系來的，這樣比較方便批量引入
    const fileUrl = (name || path) + '/index.tsx'
    return key.includes(fileUrl)
  })
  if (target) {
    // 這里使用的是 react 的 lazy 函數進行懶加載，vue 的使用也差不多
    target.component = lazy(pageFn as any)
  }
})

export default routes

import.meta.glob() 方法返回的是一個對象，類型大致為

{
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js')
}

gzip 壓縮

推薦一個社區開發的插件 vite-plugin-compression，支持多種壓縮算法，設置項也很齊全，不過我覺得默認的設置已經滿足大部分需求了。

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [viteCompression()]
})

其他優化手段

因為 vite 才剛剛開始進入正式版本，所以各種配套的工具鏈還不夠完善，像 cdn 引入的包雖然有，但是之前使用的時候一直無法生效，查了很久也沒解決問題，所以就不多推薦了。但是在 vue 官方的大力推進和社區的促進下，以后這些配套的優化工具也會越來越多，所以推薦大家趕緊學起來！