feat: add shared.generate to determine if a shared file needs to be generated on the remote side (#311)

Author: Jiannan-dev

README-zh.md

@@ -345,6 +345,17 @@ shared: {
 }
 ```
 
+#### `generate : boolean`
+* `default: true`
+* 是否生成shared chunk文件 ，如果你确定host端有一个可以使用的shared，那么你可以在remote端设置不生成共享文件，以减少remote端的块文件的大小，该配置只在remote有效，host端无论如何都会生成自己的shared。
+```js
+shared: {
+  packageName: {
+    generate: false
+  }
+}
+``
+
 ## FAQ
 
 ### ERROR: `Top-level` await is not available in the configured target environment

README.md

@@ -333,6 +333,17 @@ shared: {
 }
 ```
 
+#### `generate : boolean`
+* `default: true` 
+* generate a shared chunk file or not , if you make sure that the host side has a share that can be used, then you can set not to generate a shared file on the remote side to reduce the size of the remote's chunk file, which is only effective on the remote side, the host side will generate a shared chunk no matter what.
+```js
+shared: {
+    packageName: {
+        generate: false
+    }
+}
+```
+
 ## FAQ
 
 ### ERROR: `Top-level` await is not available in the configured target environment

packages/examples/vue3-demo-esm/common-lib/vite.config.ts

@@ -16,7 +16,8 @@ export default defineConfig({
       },
       shared: {
         vue: {
-          requiredVersion: '^3.0.0'
+          requiredVersion: '^3.0.0',
+          generate:false
         }
       },
     }),

packages/examples/vue3-demo-esm/css-modules/vite.config.ts

@@ -21,7 +21,11 @@ export default defineConfig({
       exposes: {
         './Button': './src/components/Button.vue'
       },
-      shared: ['vue']
+      shared: {
+        vue:{
+          generate:false
+        }
+      }
     }),
     topLevelAwait({
       // The export name of top-level await promise for each chunk module

packages/examples/vue3-demo-esm/home/vite.config.ts

@@ -18,10 +18,10 @@ export default defineConfig({
       },
       shared: {
         vue:{
-
+          generate:false
         },
         pinia:{
-
+          generate:false
         },
         // This is to test if the custom library can be SHARED, there is no real point
         myStore:{

packages/examples/vue3-demo-esm/layout/vite.config.ts

@@ -25,7 +25,14 @@ export default defineConfig({
                 },
                 'css-modules': 'http://localhost:5003/assets/remoteEntry.js'
             },
-            shared: ['vue', 'pinia']
+            shared: {
+                vue:{
+                    // This is an invalid configuration, because the generate attribute is not supported on the host side
+                    generate:false
+                },
+                pinia:{
+                }
+            }
         })
     ],
     build: {

packages/lib/src/prod/remote-production.ts

@@ -143,14 +143,16 @@ export {__federation_method_ensure, __federation_method_getRemote , __federation
               }${
                 sharedInfo[1].root ? sharedInfo[1].root[0] + '/' : ''
               }${basename}`,
-              preserveSignature: 'allow-extension'
+              preserveSignature: 'allow-extension',
+              name: sharedInfo[0]
             })
             sharedFileName2Prop.set(basename, sharedInfo as ConfigTypeSet)
           }
         }
 
         if (id === '\0virtual:__federation_fn_import') {
           const moduleMapCode = parsedOptions.prodShared
+            .filter((shareInfo) => shareInfo[1].generate)
             .map(
               (sharedInfo) =>
                 `'${sharedInfo[0]}':{get:()=>()=>__federation_import('./${

packages/lib/src/prod/shared-production.ts

@@ -18,7 +18,7 @@ import type {
 } from 'rollup'
 import { sharedFileName2Prop } from './remote-production'
 const sharedFileNameReg = /^__federation_shared_.+\.js$/
-const shareFilePathReg = /__federation_shared_.+\.js$/
+const sharedFilePathReg = /__federation_shared_.+\.js$/
 
 export function prodSharedPlugin(
   options: VitePluginFederationOptions
@@ -549,11 +549,21 @@ export function prodSharedPlugin(
       if (!isRemote) {
         return
       }
+      const needRemoveShared = new Set<string>()
       for (const key in bundle) {
         const chunk = bundle[key]
         if (chunk.type === 'chunk') {
+          const removeSharedChunk =
+            !isHost &&
+            sharedFilePathReg.test(chunk.fileName) &&
+            shareName2Prop.has(chunk.name) &&
+            !shareName2Prop.get(chunk.name).generate
+          if (removeSharedChunk) {
+            needRemoveShared.add(key)
+            continue
+          }
           const importShared = chunk.imports?.some((name) =>
-            shareFilePathReg.test(name)
+            sharedFilePathReg.test(name)
           )
           if (importShared) {
             const transformedCode = transformImportFn.apply(this, [
@@ -566,6 +576,11 @@ export function prodSharedPlugin(
           }
         }
       }
+      if (needRemoveShared.size !== 0) {
+        for (const key of needRemoveShared) {
+          delete bundle[key]
+        }
+      }
     }
   }
 }

packages/lib/src/utils/index.ts

@@ -47,13 +47,15 @@ export function parseSharedOptions(
       shareScope: 'default',
       packagePath: key,
       // Whether the path is set manually
-      manuallyPackagePathSetting: false
+      manuallyPackagePathSetting: false,
+      generate: true
     }),
     (value, key) => {
       value.import = value.import ?? true
       value.shareScope = value.shareScope || 'default'
       value.packagePath = value.packagePath || key
       value.manuallyPackagePathSetting = value.packagePath !== key
+      value.generate = value.generate ?? true
       return value
     }
   )

packages/lib/types/index.d.ts

@@ -294,4 +294,9 @@ declare interface SharedConfig {
    * Version of the provided module. Will replace lower matching versions, but not higher.
    */
   version?: string | false
+
+  /**
+   * determine whether to include the shared in the chunk, true is included, false will not generate a shared chunk, only the remote side of the parameter is valid, the host side will definitely generate a shared chunk
+   */
+  generate?: boolean
 }