webpack拓展篇（六十九）：vite 的建構原理（完結）

說明

玩轉 webpack 學習筆記

Vite 建構速度快的原因

預建構使用 ESBuild (冷啟動快的原因) ：​​https://github.com/evanw/esbuild​​

因為 esbuild 裡面使用的是 Golang 語言去進行打包，它是靜态語言

Vite 打包流程

建立建構服務

檔案路徑： ​

​src/node/server/index.ts​

​

靜态檔案托管服務

檔案路徑：​

​src/node/server/index.ts​

​

重寫子產品路徑

檔案路徑： ​

​src/node/server/index.ts​

​

檔案路徑：​

​src/node/server/serverPluginModuleRewrite.ts​

​

對于 ​

​bare import​

​​，把子產品名替換為這個子產品的 ​

​entry path​

​​，并在 path 的開頭補上一個 ​

​/@modules​

​ 的辨別符。

如: ​

​import React from "/@modules/@pika/react/source.development.js"​

​

相對路徑轉絕對路徑，友善浏覽器請求。

補齊檔案擴充名和經常被省略的 ​

​index.xxx​

​

如：​

​import a from '/src/a/index.js'​

​

給非 js 類型( js 類型：如 ​

​js(x)/ts(x)/vue​

​​)的檔案位址加上一個叫 ​

​"import"​

​ 的 query 參數。

給 hmr 相關的請求位址添加時間戳，避免緩存。

如: ​

​import '/src/App.jsx?t=1599124870589'​

​

靜态資源打包政策

浏覽器不支援 JS 中直接寫 ​

​import CSS​

​、圖檔、JSON 等文法。.

webpack loader 的處理政策:

• CSS：轉換成 js 的子產品，執行子產品會在 DOM 中建立​

  ​<style>​

  ​ 标簽并且插入CSS内容
• 圖檔：轉換成圖檔路徑
• JSON：轉化成 js 子產品,​

  ​default export = json​

  ​

vue 腳本打包政策

遇到 ​

​.vue​

​ 檔案

• 擷取 Script 内容
• 如果有 style 就發送請求擷取 style 的部分
• 發送請求擷取 template 的部分
• 進行渲染

CSS 資源打包政策

• 将 CSS 源碼加工成 JS 子產品
• updateStyle 會通過 CSS Style Shee API 後者直接建立​

  ​<style>​

  ​ 标簽
• 将 CSS 代碼插入到 DOM 中
• 如果開啟了CSS Module，則直接導出成一個對象，否則導出 CSS 代碼

模闆打包政策