From 18794a55a8612aa86c73a6744a0399377af1cdad Mon Sep 17 00:00:00 2001 From: morizon Date: Sat, 24 Dec 2022 18:39:05 +0800 Subject: [PATCH] fix: reduce webpack chunk duplication --- development/webpackTools.js | 29 ++++++++++++------- packages/desktop/webpack.config.js | 2 ++ packages/ext/webpack.config.js | 21 ++++++++++++-- .../src/provider/createLazyKitProvider.tsx | 13 ++++++++- packages/kit/src/provider/index.tsx | 1 + packages/web/package.json | 2 +- 6 files changed, 53 insertions(+), 15 deletions(-) diff --git a/development/webpackTools.js b/development/webpackTools.js index ee617081218..1b63e32eb7f 100644 --- a/development/webpackTools.js +++ b/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', diff --git a/packages/desktop/webpack.config.js b/packages/desktop/webpack.config.js index f6ab2438e2f..75c83482e8e 100644 --- a/packages/desktop/webpack.config.js +++ b/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; }; diff --git a/packages/ext/webpack.config.js b/packages/ext/webpack.config.js index d8d8a680994..7b11cd08994 100755 --- a/packages/ext/webpack.config.js +++ b/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; }, diff --git a/packages/kit/src/provider/createLazyKitProvider.tsx b/packages/kit/src/provider/createLazyKitProvider.tsx index 5e45e0829c1..64196fc70bd 100644 --- a/packages/kit/src/provider/createLazyKitProvider.tsx +++ b/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; +} diff --git a/packages/kit/src/provider/index.tsx b/packages/kit/src/provider/index.tsx index 1f6d30895ed..954cca60a97 100644 --- a/packages/kit/src/provider/index.tsx +++ b/packages/kit/src/provider/index.tsx @@ -48,6 +48,7 @@ const KitProvider: FC = (propsRaw) => { const { UIApplicationLaunchOptionsRemoteNotificationKey: launchNotification, } = props; + global.$$onekeyPerfTrace?.log({ name: 'KitProvider render' }); return ( diff --git a/packages/web/package.json b/packages/web/package.json index 73f8024fc85..62929c8225a 100644 --- a/packages/web/package.json +++ b/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"