vue3.0 發(fā)布至今也有一段時(shí)間了, 你是否已經(jīng)拄著拐杖開始成盒之旅了呢? vue3.0 確實(shí)比 vue 2.0 輕快了不少, 更小的體積, 更高效率的數(shù)據(jù)劫持, 更快的節(jié)點(diǎn)渲染.
另外還有更好的IDE智能聯(lián)想, 這取決于vue3.0 的代碼采用 TypeScript 編寫, 這也決定了開發(fā)時(shí)更少的Bug, 以及能保留更多的頭發(fā).
此外vue團(tuán)隊(duì)還開發(fā)了 vite web開發(fā)工具, 利用瀏覽器ESM特性實(shí)現(xiàn)動(dòng)態(tài)驅(qū)動(dòng)開發(fā), 遇到 import 的時(shí)候就會(huì)觸發(fā)文件加載, 無需啟動(dòng)時(shí)分析資源依賴.

打包處理機(jī)制

• 在開發(fā)時(shí)瀏覽器由于ESM特性加載對(duì)應(yīng)的資源, vite只需負(fù)責(zé)處理由瀏覽器發(fā)起請(qǐng)時(shí)的文件, 經(jīng)過層層處理之后返回給瀏覽器即可.
  不像webpack開始編譯時(shí)需要較多時(shí)間對(duì)所有資源進(jìn)行依賴分析編譯, 拋棄了webpack那一堆堆插件及l(fā)oader, 避免了背三級(jí)包送快遞成盒, 著實(shí)減輕了不少負(fù)擔(dān).
  vite在開發(fā)過程中也會(huì)使用rollup對(duì)node_modules或者指定資源進(jìn)行處理(比如將commonjs模塊轉(zhuǎn)成es模塊), 生產(chǎn)環(huán)境中使用 rollup 對(duì)文件進(jìn)行打包壓縮混淆處理.

Eslint

• webpack eslint校驗(yàn)是用過eslint-loader進(jìn)行處理, 如果校驗(yàn)文件過多會(huì)嚴(yán)重拖慢編譯進(jìn)度導(dǎo)致進(jìn)圈困難被du死成盒.
  而在vite在開發(fā)中eslint不直接參與文件處理, 可以只使用編輯工具進(jìn)行提示, 在生產(chǎn)環(huán)境發(fā)布時(shí)校驗(yàn)一次即可.
  當(dāng)然非要在開發(fā)時(shí)就開啟eslint校驗(yàn)也是可以的, 這時(shí)需要單獨(dú)啟用eslint監(jiān)聽文件變化進(jìn)行及時(shí)校驗(yàn), 且?guī)缀醪挥绊戦_發(fā)編譯時(shí)間.

服務(wù)器渲染

• vite開發(fā)時(shí)是使用的客戶端渲染, 保證了更快的編譯熱更新. 只有生產(chǎn)環(huán)境的時(shí)候才會(huì)采用服務(wù)器渲染形式.
  這時(shí)候就要求開發(fā)過程中切勿在服務(wù)器端運(yùn)行的代碼中使用瀏覽器的特有屬性和方法(比如window document), 否則服務(wù)端運(yùn)行必將出錯(cuò)直接成盒.

ESM 只愛es模塊

• 當(dāng)私自引用一個(gè)非es模塊時(shí)需要將模塊轉(zhuǎn)換成es模塊, 默認(rèn)情況下vite會(huì)對(duì)package.json中dependencies屬性中的依賴自動(dòng)進(jìn)行轉(zhuǎn)換,
  且使用模塊時(shí)的名稱與dependencies中的依賴名稱必須保持一致, 否則直接爆頭成盒.
  例如: Uncaught SyntaxError: The requested module '/@modules/axios/index.js' does not provide an export named 'default'
  當(dāng)然你也可以手動(dòng)在根目錄的vite.config.js里面的optimizeDeps.include中指定某些要轉(zhuǎn)的模塊.

別名

• 在webpack開發(fā)過程中通常只需要設(shè)置一次別名, 但是在vite中需要設(shè)置兩個(gè)地方, 一份是針對(duì)開發(fā)時(shí)在vite.config.js設(shè)置的別名,

// vite.config.js
export default {
  resolvers: [
    {
      alias (id) {
        if (id.startsWith('@/')) {
          return '/src/' + id.slice(2);
        }
      }
    }
  ]
}

一份是給rollup生產(chǎn)打包時(shí)用的別名

// build.js
const rollupAlias = require('@rollup/plugin-alias');
const { build } = require('vite');
const path = require('path');

build({
  rollupInputOptions: {
    plugins: [rollupAlias({ '@': path.resolve(__dirname, 'src') })]
  }
});

愣頭青

• 目前vue3.0生態(tài)仍在快速發(fā)展, vite, 相關(guān)UI庫, vuex仍需繼續(xù)采坑吃雷成盒, 預(yù)計(jì)還要一段時(shí)間才能達(dá)到相對(duì)穩(wěn)定的狀態(tài), 報(bào)著吃雞念頭繼續(xù)往下走吧.
  這個(gè)是歷經(jīng)多次成盒吃到的雞, 快速開發(fā), 服務(wù)器數(shù)據(jù)預(yù)取渲染, vuex, typescript, eslint, scss應(yīng)有盡有, 不看看并Star一下嘛 ? vue3-ts-vite-ssr-starter

vue3-ts-vite-ssr-starter

• Lightning-fast cold server start
• Instant hot module replacement (HMR)
• True on-demand compilation
• Use vue3 vite typescript eslint SSR vuex vue-router element-plus scss

Getting Started

• dev ( csr )

npm i
npm run dev

• test ( ssr )

npm run test

npm run server:data  // building api data

• build ( ssr )

npm run build