fix: reduce webpack chunk duplication

development/webpackTools.js

@@ -189,18 +189,27 @@ function normalizeConfig({
   config.optimization ??= {};
   config.optimization.splitChunks ??= {};
   config.optimization.splitChunks = {
+    chunks: 'all',
+    minSize: 100 * 1024,
+    maxSize: 4 * 1024 * 1024,
+    hidePathInfo: true,
+    automaticNameDelimiter: '.',
+    automaticNameMaxLength: 15,
+    name: false, // reduce module duplication across chunks
+    maxInitialRequests: 50000, // reduce module duplication across chunks
+    maxAsyncRequests: 50000, // reduce module duplication across chunks
     ...config.optimization.splitChunks,
     cacheGroups: {
-      kit_assets: {
-        test: /\/kit\/assets/,
-        name: 'kit_assets',
-        chunks: 'all',
-      },
-      kit_routes: {
-        test: /\/kit\/src\/routes/,
-        name: 'kit_routes',
-        chunks: 'all',
-      },
+      // kit_assets: {
+      //   test: /\/kit\/assets/,
+      //   name: 'kit_assets',
+      //   chunks: 'all',
+      // },
+      // kit_routes: {
+      //   test: /\/kit\/src\/routes/,
+      //   name: 'kit_routes',
+      //   chunks: 'all',
+      // },
       // lodash: {
       //   test: /\/node_modules\/lodash/,
       //   name: 'lodash',

packages/desktop/webpack.config.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const { createWebpackConfigAsync } = require('expo-yarn-workspaces/webpack');
+const devUtils = require('@onekeyhq/ext/development/devUtils');
 const webpackTools = require('../../development/webpackTools');
 const { webModuleTranspile } = require('../../development/webpackTranspiles');
 
@@ -27,5 +28,6 @@ module.exports = async function (env, argv) {
   if (process.env.NODE_ENV === 'production') {
     config.devtool = false;
   }
+  devUtils.writePreviewWebpackConfigJson(config, 'webpack.config.preview.json');
   return config;
 };

packages/ext/webpack.config.js

@@ -232,16 +232,21 @@ function enableCodeSplitChunks({ config, name }) {
     maxSizeMb = 1;
   }
   config.optimization.splitChunks = {
+    // merge webpackTools.normalizeConfig() splitChunks config
+    ...config.optimization.splitChunks,
     chunks: isFirefox ? 'all' : 'all', // all, async, and initial
-    minSize: 0, // 2000000
+    minSize: 100 * 1024, // 100k
     maxSize: maxSizeMb * 1024 * 1024, // limit to max 2MB to ignore firefox lint error
 
     // auto-gen chunk file name by module name or just increasing number
     name: (module, chunks, cacheGroupKey, p1, p2, p3) => {
       chunkIndex += 1;
-      return name ? `vendors-${name}-${chunkIndex}` : false;
+      const returnName = name ? `vendors-${name}-${chunkIndex}` : false;
+      // return returnName;
+
+      // **** reduce module duplication across chunks
+      return false;
     },
-    // name: false,
 
     hidePathInfo: true, // ._m => d0ae3f07    .. => 493df0b3
     automaticNameDelimiter: `.`, // ~ => .
@@ -266,6 +271,9 @@ function enableCodeSplitChunks({ config, name }) {
     // config.optimization.splitChunks = undefined;
   }
 }
+function disableCodeSplitChunks({ config, name }) {
+  config.optimization.splitChunks = undefined;
+}
 
 // https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations
 const multipleEntryConfigs = [
@@ -305,7 +313,11 @@ const multipleEntryConfigs = [
     configUpdater(config) {
       if (isManifestV2) {
         enableCodeSplitChunks({ config, name: 'bg' });
+      } else {
+        // manifest v3 background can NOT split code
+        disableCodeSplitChunks({ config, name: 'bg' });
       }
+
       config.plugins = [...config.plugins, ...pluginsHtml.backgroundHtml];
       return config;
     },
@@ -320,6 +332,9 @@ const multipleEntryConfigs = [
       },
     },
     configUpdater(config) {
+      // content-script can NOT split code
+      disableCodeSplitChunks({ config, name: 'cs' });
+
       config.plugins = [...config.plugins, ...pluginsCopy];
       return config;
     },

packages/kit/src/provider/createLazyKitProvider.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import '../background/instance/backgroundApiProxy';
 
-export function createLazyKitProvider({
+export function createLazyKitProviderLegacy({
   displayName,
 }: {
   displayName: string;
@@ -32,3 +32,14 @@ export function createLazyKitProvider({
   LazyKitProvider.displayName = displayName;
   return LazyKitProvider;
 }
+
+export function createLazyKitProvider({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  displayName,
+}: {
+  displayName?: string;
+} = {}) {
+  const KitProvider = require('./index');
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access
+  return KitProvider.default;
+}

packages/kit/src/provider/index.tsx

@@ -48,6 +48,7 @@ const KitProvider: FC<LaunchProps> = (propsRaw) => {
   const {
     UIApplicationLaunchOptionsRemoteNotificationKey: launchNotification,
   } = props;
+  global.$$onekeyPerfTrace?.log({ name: 'KitProvider render' });
   return (
     <SWRConfig value={swrConfig}>
       <ReduxProvider store={store}>

packages/web/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "postinstall": "expo-yarn-workspaces postinstall",
     "dev": "expo start",
-    "start": "WEB_PORT=3000 expo start --web",
+    "start": "WEB_PORT=3000 ENABLE_ANALYZER=1 ENABLE_ANALYZER_HTML_REPORT=1 expo start --web",
     "build": "rm -rf ./web-build && ENABLE_ANALYZER=1 ENABLE_ANALYZER_HTML_REPORT=1 expo build:web && cp ./web-build/index.html ./web-build/404.html && sh ./postbuild.sh",
     "lint": "tsc --noEmit && eslint . --ext .ts,.tsx",
     "stats": "NODE_ENV=production ENABLE_ANALYZER=1 webpack build"