3、Vite 同時(shí)利用 HTTP 頭來加速整個(gè)頁(yè)面的重新加載（再次讓瀏覽器為我們做更多事情）：源碼模塊的請(qǐng)求會(huì)根據(jù) 304 Not Modified 進(jìn)行協(xié)商緩存，而依賴模塊請(qǐng)求則會(huì)通過 Cache-Control: max-age=31536000,immutable 進(jìn)行強(qiáng)緩存，因此一旦被緩存它們將不需要再次請(qǐng)求。

安裝和使用

1、 安裝方式

官方提供的方式

/**npm 方式*/
$ npm create vite@lastest

/** Yarn 方式*/
$ yarn create vite

/** PNPM*/
$ pnpm create vite

還可以使用官方的一些模板

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

其實(shí)無論使用上面的哪種方式，其實(shí)都是使用的官方封裝好的vite腳手架。如果想要單獨(dú)的使用vite

/* npm 方式*/
npm i vite -D
/* Yarn 方式*/
yarn add vite -D
/* PNPM 方式  要求node>= 17.0.0 */
pnpm add vite -D 

2、 配置文件

如果想要配置vite 需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)vite.config.js 的文件，vite.config.js 是編譯時(shí)需要執(zhí)行的，所有執(zhí)行在node端

// vite.config.js
export default {
  // 配置選項(xiàng)
}

支持ts的配置

/** 方式一 */
/** @type {import('vite').UserConfig} */
export default {
  // ...
}

/** 方式二 */
/** 使用defineConfig 還可以讓vscode 可以有語法提示 */
import { defineConfig } from 'vite'
export default defineConfig({
  // ...
})

注：Vite默認(rèn)支持ESM語法，所有可以不用在package.json 中開啟 type: "module"。

3、環(huán)境配置
配置可以返回一個(gè)方法，可以是異步方法，在函數(shù)中可以獲取到command來區(qū)分。

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 獨(dú)有配置
    }
  } else {
    // command === 'build'
    return {
      // build 獨(dú)有配置
    }
  }
})

mode的使用（vite內(nèi)置了dotenv插件）:

• 在項(xiàng)目根目錄中創(chuàng)建.env.development 和 .env.production（vite可以使用evnDir：來指定環(huán)境變量文件的位置，默認(rèn)是找跟目錄下面的.env 文件）

• 執(zhí)行serve 命令時(shí)，mode 默認(rèn)為development ，執(zhí)行build 時(shí)，mode默認(rèn)為production

• .env.[mode]文件中

/** .env.development */
VITE_URL = http://www.baidu.com
VITE_USER = little-lion

• 可以使用loadEnv加載env 文件
  loadEnv(mode, 文件所在目錄, 文件名前綴)

export default defineConfig(({ command, mode, ssrBuild }) => {
   const env = loadEnv(mode, process.pwd(), '') //  process.pwd() node 啟動(dòng)服務(wù)根目錄
})

• 可以使用命令行指定mode

npm dev --mode development

• 在js 中使用import.meta.env獲取到VITE_前綴的環(huán)境變量，可以使用envPrefix改變這個(gè)前綴

    /** 使用import.meta.env */

   /* vite.config.js 中修改前綴 */
 export default {
      envPrefix: "LIKE_"
}

4、module css的使用

// 需要使用import 導(dǎo)入 
// css 文件名字需要添加上module
import componentCss from './component.module.css'
console.log(componentCss) // 打印看下都有什么
const div = document.createElement("div");

// ['class'] 這個(gè)是component.module.css中定義的樣式選擇器名字
div.className = componentCss['class']

在vite.config.js中配置

export default {
    css: {
        modules: { // 對(duì)默認(rèn)行為的覆蓋,傳給postcss modules
            localsConvention: 'cameCase',  // 配置css 選擇器轉(zhuǎn)化后的名字類型---- 駝峰式
            scopeBehaviour: 'global' | 'local', // 配置當(dāng)前的是模塊化還是全局化
            generateScopedName: '[name]_[local]_[hash:5]',  // 生成類名的規(guī)則  https://github.com/webpack/loader-utils#interpolatename
        }
    }
}

5、插件

$ npm add -D @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

使用enforce強(qiáng)制插件排序:

• pre：在 Vite 核心插件之前調(diào)用該插件
• 默認(rèn)：在 Vite 核心插件之后調(diào)用該插件
• post：在 Vite 構(gòu)建插件之后調(diào)用該插件

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre',
    },
  ],
})

使用apply屬性指明它們僅在 'build' 或 'serve' 模式時(shí)調(diào)用

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build',
    },
  ],
})

更多的使用方法：Vite官網(wǎng)
更多的插件：Vite插件

總結(jié)

1、相對(duì)vite來說，webpack在本地起服務(wù)時(shí)，會(huì)讀取所有的模塊，所有到底本地啟動(dòng)和編譯的時(shí)候比較緩慢，但是webpack的兼容性比較好，支持Commonjs規(guī)范。vite只能構(gòu)建瀏覽器端的應(yīng)用，而webpack還能構(gòu)建node端的應(yīng)用，所以沒有必要非要使用Vite，而是針對(duì)項(xiàng)目而定。
2、Vite在預(yù)構(gòu)建時(shí)基于esbuild進(jìn)行的，但是esbuild的兼容性不好，還不太穩(wěn)定，所以暫時(shí)最好不要使用esbuild，未來可學(xué)習(xí)（對(duì)我自己說的）。