最近實現的簡單、透明、組件化微前端方案總體感覺不錯，也收到了很多人的反饋，很具有學習參考價值。

但有不少朋友使用該方案打包配置出現了一些問題，做事應有始有終，挖的坑總得完善一下。今天分享一下 Vite 針對微應用方案插件開發歷程。

通過文章你可以學到：

問題點

總結下來，在 Vite 中使用該微前端方案會遇到如下問題：

Vite 打包后的資源默認是以 HTML 為入口，我們的微前端方案需要以 JS 為入口

JS 為入口方案打包導出代碼被移除掉了

import.meta 語句打包被轉譯成 {} 空對象了

chunk 分離后的 CSS 文件，Vite 默認以document.head.appendChild 處理

打包后的 CSS 文件默認在 main.js 中沒有引用

資源路徑手動寫 new URL(image, import.meta.url) 太繁瑣

通過配置解決問題

首先前三個問題可以通過 Vite 解決。Vite 兼容了 rollup 的配置

問題一，修改 JS 入口則需要修改 Vite 配置，設置 build.rollupOptions.input 為 src/main.tsx，這樣 Vite 會默認以自定義配置的main.tsx 為入口文件做打包處理，不再生成 index.html。

問題二，rollup 的一個特性默認會清理掉入口文件的導出模塊，可以配置 preserveEntrySignatures: 'allow-extension' 來保證打包之后 export 的模塊不被移除掉。

問題三，看了 Vite 的 Issue，很多人遇到了這個問題，最初以為是 Vite 默認對它做了處理，后面看了 Vite 源碼也沒有發現處理的邏輯所在，應該是被 esbuild 做了轉譯。因此將 build.target 設置為 esnext 即可解決問題，即import.meta 屬于 es2020，設置為具體的 es2020 也行。

配置：

export default defineConfig({
  build: {
    // es2020 支持 import.meta 語法
    target: 'es2020',
    rollupOptions: {
      // 用于控制 Rollup 嘗試確保入口塊與基礎入口模塊具有相同的導出
      preserveEntrySignatures: 'allow-extension',
      // 入口文件
      input: 'src/main.tsx',
    },
  },
});

寫 Vite 插件

我們可以寫一個插件將上面的配置封裝。

一個普通的 Vite 插件很簡單

defineConfig({
  plugins: [
    {
      // 可以使用 Vite 和 rollup 提供的鉤子
    },
  ],
});

插件可以做很多事情，通過 Vite 和 rollup提供的鉤子對代碼解析、編譯、打包、輸出的整體流程進行自定義處理。

插件一般不直接寫在 vite.config.ts 中，可以定義一個方法導出這個插件，這里可以用config 這個鉤子來提供默認的 Vite 配置，將自定義的配置進行封裝：

export function microWebPlugin(): Plugin {
  // 插件鉤子
  return {
    name: 'vite-plugin-micro-web',
    config() {
      return {
        build: {
          target: 'es2020',
          rollupOptions: {
            preserveEntrySignatures: 'allow-extension',
            input: 'src/main.tsx',
          },
        },
      };
    },
  };
}

這樣一個簡單的插件就完成了。

Vite 獨有鉤子

config - 在解析 Vite 配置前調用，它可以返回一個將被深度合并到現有配置中的部分配置對象，或者直接改變配置

configResolved - 在解析 Vite 配置后調用，使用這個鉤子讀取和存儲最終解析的配置

configureServer - 是用于配置開發服務器的鉤子

transformIndexHtml - 轉換 index.html 的專用鉤子。鉤子接收當前的 HTML 字符串和轉換上下文

handleHotUpdate - 執行自定義 HMR 更新處理。

rollup 鉤子

rollup 鉤子非常多，一共分兩個階段

編譯階段：

輸出階段：

這里我們會用到的鉤子有：

• transform - 用于轉換已加載的模塊內容
• generateBundle - 已經編譯過的代碼塊生成階段

樣式插入節點處理

問題四，document.head.appendChild 處理

使用 transform 鉤子，替換 Vite 默認的document.head.appendChild 為自定義節點

cssCodeSplit 打包為一個 CSS 文件

我們默認采用 cssCodeSplit 打包為一個 CSS 文件，免去了用插件 transform 修改 Vite 的邏輯。

問題五，即打包后的 CSS 沒有引用的問題，獲取這個帶 hash 的 CSS 我們可以有多種解決方案

使用 HTML 打包模式，抽取 index.html 中的 JS 、CSS 文件再單獨處理

不添加樣式文件名 hash ，通過約定固定該樣式名稱

通過鉤子提取文件名處理

權衡之下，最終采用 generateBundle 階段提取 Vite 編譯生成的 CSS 文件名，通過修改入口代碼將其插入。但 generateBundle 已經在輸出階段，不會再走 transform 鉤子。

發現一個兩全其美的辦法：創建極小的入口文件main.js，還可以配合 hash 和主應用時間戳緩存處理。

async generateBundle(options, bundle) {
  // 主入口文件
  let entry: string | undefined;
  // 所有的 CSS 模塊
  const cssChunks: string[] = [];
  // 找出入口文件和 CSS 文件
  for (const chunkName of Object.keys(bundle)) {
    if (chunkName.includes('main') && chunkName.endsWith('.js')) {
      entry = chunkName;
    }
    if (chunkName.endsWith('.css')) {
      // 使用相對路徑，避免后續 ESM 無法解析模塊
      cssChunks.push(`./${chunkName}`);
    }
  }
  // 接下面代碼
},

生成新的入口文件

通過 bundle 提取可以獲取到帶 hash 的JS、CSS 入口文件了。現在需要寫入一個新的文件 main.js。rollup 中有個 API emitFile可以觸發創建一個資源文件。

接下來對它進行處理：

// 接上面代碼
if (entry) {
  const cssChunksStr = JSON.stringify(cssChunks);

  // 創建極小的入口文件，配合 hash 和主應用時間戳緩存處理
  this.emitFile({
    fileName: 'main.js',
    type: 'asset',
    source: `
// 帶上 microAppEnv 參數，使用相對路徑避免報錯
import defineApp from './${entry}?microAppEnv';

// 創建 link 標簽
function createLink(href) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  return link;
}

// 入口文件導出一個方法，將打包的 CSS 文件通過 link 的方式插入到對應的節點中
defineApp.styleInject = (parentNode) => {
  ${cssChunksStr}.forEach((css) => {
    // import.meta.url 讓路徑保持正確，中括號取值避免被 rollup 轉換掉
    const link = createLink(new URL(css, import.meta['url']));
    parentNode.prepend(link);
  });
};

export default defineApp;
        `,
  });
}

插件需要應用入口配合導出一個 styleInject方法提供樣式插入，我們通過封裝入口方法得以解決。

封裝一個方法給應用入口調用：

export function defineMicroApp(callback) {
  const defineApp = (container) => {
    const appConfig = callback(container);
    // 處理樣式局部插入
    const mountFn = appConfig.mount;
    // 獲取到插件中的方法
    const inject = defineApp.styleInject;
    if (mountFn && inject) {
      appConfig.mount = (props) => {
        mountFn(props);
        // 裝載完畢后，插入樣式
        inject(container);
      };
    }
    return appConfig;
  };

  return defineApp;
}

現在 build 之后會生成一個不帶 hash 的 main.js 文件，主應用可以正常加載打包后的資源了。

進一步優化，main.js 的壓縮混淆，可以用 Vite 導出 transformWithEsbuild 進行編譯：

const result = await transformWithEsbuild(customCode, 'main.js', {
  minify: true,
});

this.emitFile({
  fileName: 'main.js',
  type: 'asset',
  source: result.code,
});

子應用路徑問題

之前我們需要手動添加 new URL(image, import.meta.url) 來修復子應用路徑問題。通過 transform 鉤子自動處理該邏輯。

在這個插件之前，Vite 會將所有的資源文件轉換為路徑

import logo from './logo.svg';

// 轉換為：

export default '/src/logo.svg';

因此，我們只需要將 export default "資源路徑" 替換為 export default new URL("資源路徑", import.meta['url']).href 就可以了。

const imagesRE = new RegExp(`\\.(png|webp|jpg|gif|jpeg|tiff|svg|bmp)($|\\?)`);

transform(code, id) {
  // 修正圖片資源使用絕對地址
  if (imagesRE.test(id)) {
    return {
      code: code.replace(
        /(export\s+default)\s+(".+")/,
        `$1 new URL($2, import.meta['url']).href`
      ),
      map: null,
    };
  }
  return undefined;
},

完成，一個比較完善的 Vite 微應用方案由此而生。

看看效果：

更多

有了插件，可以發揮出意想不到的事情。本微前端方案沒有實現以下的隔離方式，不保證后續會實現，大家可以發揮更多的想象力。

CSS 樣式隔離

通過插件將主應用節點中的 id 添加并修改CSS

.name {
  color: red;
}

/* 轉換為 */

#id .name {
  color: red;
}

但前提是需要為每個 設置一個唯一的 id。并且樣式性能會受到影響，CSSModules 方案會更好。

JS 沙箱

雖然在 ESM 中做運行時沙箱目前沒有現成的方案，但運行時沙箱性能非常差。換個思路，可以從編譯時沙箱入手。用 transform 鉤子將應用所有的 window 轉譯為沙箱fakeWindow，從而達到隔離效果。

代碼示例

大家可以 clone 下來學習

插件倉庫：https://github.com/MinJieLiu/micro-app/tree/main/packages/micro-vite-plugin

微前端示例：https://github.com/MinJieLiu/micro-app-demo