模塊聯合中的共享庫：如何提供？

Question

我已經使用模塊聯合設置了一個項目：

module.exports = {
output: {
    uniqueName: "my-mfe",
    publicPath: "auto"
},
optimization: {
    runtimeChunk: false
},
resolve: {
    alias: {
        ...sharedMappings.getAliases()
    }
},
plugins: [
    new ModuleFederationPlugin({
        name: "my-mfe",
        filename: "remoteEntry.js",
        exposes: {
            "./Module": "./src/app/mymfe/mymfe.module.ts"
        },

        shared: share({
            "@angular/core": {
                singleton: true,
                strictVersion: true,
                requiredVersion: "auto",
                eager: true //true means it will be in my remoteEntry.js
            },
            ...sharedMappings.getDescriptors()
         }),
         sharedMappings.getPlugin()
      ]};

如您所見，每個微前端都共享 angular 內核（以及其他庫）。 現在，如果我輸入 eager=true 它可以工作，但是庫會進入 remoteEntry.js 文件，這很糟糕，因為大小會增加（當然）。

但是，如果我設置 eager=false，代碼如何在需要時檢索庫？ 首先，圖書館會在哪里？ 我找不到圖書館的任何“公開”部分。

Answer 1

有關於此的活動 webpack 錯誤。 https://github.com/webpack/webpack/issues/15164

我對 requiredVersion 使用以下方法：

shared: {
        "@angular/core": {requiredVersion: '13.1.1'},
        "@angular/common": {requiredVersion: '13.1.1'},
        "@angular/router": {requiredVersion: '13.1.1'},
        "rxjs": {requiredVersion: '6.6.0'},
        "rxjs/operators": {requiredVersion: '6.6.0'},
      }

為了查看捆綁的效率，您可以打開

"namedChunks": true

你會看到它們被加載一次。