Merge pull request #6855 from alibaba/release/next

Release 3.4.7

packages/ice/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 3.4.7
+
+### Patch Changes
+
+- d5c378b6: fix: reduce bundle size by remove runtime module
+- 77155bab: feat: remove runtime code when loaders is not export
+- Updated dependencies [d5c378b6]
+- Updated dependencies [77155bab]
+  - @ice/runtime@1.4.5
+
 ## 3.4.6
 
 ### Patch Changes

packages/ice/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/app",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "description": "provide scripts and configuration used by web framework ice",
   "type": "module",
   "main": "./esm/index.js",
@@ -49,7 +49,7 @@
   "dependencies": {
     "@ice/bundles": "0.2.6",
     "@ice/route-manifest": "1.2.2",
-    "@ice/runtime": "^1.4.3",
+    "@ice/runtime": "^1.4.5",
     "@ice/shared-config": "1.2.6",
     "@ice/webpack-config": "1.1.13",
     "@ice/rspack-config": "1.1.6",

packages/ice/src/bundler/config/output.ts

@@ -39,7 +39,7 @@ async function buildCustomOutputs(
   bundleOptions: Pick<BundlerOptions, 'userConfig' | 'appConfig' | 'routeManifest'>,
 ) {
   const { userConfig, appConfig, routeManifest } = bundleOptions;
-  const { ssg, output: { distType, prependCode } } = userConfig;
+  const { ssg } = userConfig;
   const routeType = appConfig?.router?.type;
   const {
     outputPaths = [],
@@ -51,8 +51,6 @@ async function buildCustomOutputs(
     documentOnly: !ssg,
     renderMode: ssg ? 'SSG' : undefined,
     routeType: appConfig?.router?.type,
-    distType,
-    prependCode,
     routeManifest,
   });
   if (routeType === 'memory' && userConfig?.routes?.injectInitialEntry) {

packages/ice/src/constant.ts

@@ -70,6 +70,15 @@ export const RUNTIME_EXPORTS = [
       'usePageLifecycle',
       'unstable_useDocumentData',
       'dynamic',
+      // Document API
+      'Meta',
+      'Title',
+      'Links',
+      'Scripts',
+      'FirstChunkCache',
+      'Data',
+      'Main',
+      'usePageAssets',
     ],
     alias: {
       usePublicAppContext: 'useAppContext',

packages/ice/src/createService.ts

@@ -7,15 +7,12 @@ import { Context } from 'build-scripts';
 import type { CommandArgs, CommandName } from 'build-scripts';
 import type { Config } from '@ice/shared-config/types';
 import type { AppConfig } from '@ice/runtime/types';
-import fse from 'fs-extra';
 import webpack from '@ice/bundles/compiled/webpack/index.js';
 import type {
   DeclarationData,
   PluginData,
   ExtendsPluginAPI,
-  TargetDeclarationData,
 } from './types/index.js';
-import { DeclarationType } from './types/index.js';
 import Generator from './service/runtimeGenerator.js';
 import { createServerCompiler } from './service/serverCompiler.js';
 import createWatch from './service/watchSource.js';
@@ -41,6 +38,7 @@ import addPolyfills from './utils/runtimePolyfill.js';
 import webpackBundler from './bundler/webpack/index.js';
 import rspackBundler from './bundler/rspack/index.js';
 import getDefaultTaskConfig from './plugins/task.js';
+import hasDocument from './utils/hasDocument.js';
 
 const require = createRequire(import.meta.url);
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -75,56 +73,32 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
   let entryCode = 'render();';
 
   const generatorAPI = {
-    addExport: (declarationData: Omit<DeclarationData, 'declarationType'>) => {
-      generator.addDeclaration('framework', {
-        ...declarationData,
-        declarationType: DeclarationType.NORMAL,
-      });
+    addExport: (declarationData: DeclarationData) => {
+      generator.addDeclaration('framework', declarationData);
     },
-    addTargetExport: (declarationData: Omit<TargetDeclarationData, 'declarationType'>) => {
-      generator.addDeclaration('framework', {
-        ...declarationData,
-        declarationType: DeclarationType.TARGET,
-      });
+    addExportTypes: (declarationData: DeclarationData) => {
+      generator.addDeclaration('frameworkTypes', declarationData);
     },
-    addExportTypes: (declarationData: Omit<DeclarationData, 'declarationType'>) => {
-      generator.addDeclaration('frameworkTypes', {
-        ...declarationData,
-        declarationType: DeclarationType.NORMAL,
-      });
-    },
-    addRuntimeOptions: (declarationData: Omit<DeclarationData, 'declarationType'>) => {
-      generator.addDeclaration('runtimeOptions', {
-        ...declarationData,
-        declarationType: DeclarationType.NORMAL,
-      });
+    addRuntimeOptions: (declarationData: DeclarationData) => {
+      generator.addDeclaration('runtimeOptions', declarationData);
     },
     removeRuntimeOptions: (removeSource: string | string[]) => {
       generator.removeDeclaration('runtimeOptions', removeSource);
     },
-    addRouteTypes: (declarationData: Omit<DeclarationData, 'declarationType'>) => {
-      generator.addDeclaration('routeConfigTypes', {
-        ...declarationData,
-        declarationType: DeclarationType.NORMAL,
-      });
+    addRouteTypes: (declarationData: DeclarationData) => {
+      generator.addDeclaration('routeConfigTypes', declarationData);
     },
     addRenderFile: generator.addRenderFile,
     addRenderTemplate: generator.addTemplateFiles,
     addEntryCode: (callback: (originalCode: string) => string) => {
       entryCode = callback(entryCode);
     },
     addEntryImportAhead: (declarationData: Pick<DeclarationData, 'source'>) => {
-      generator.addDeclaration('entry', {
-        ...declarationData,
-        declarationType: DeclarationType.NORMAL,
-      });
+      generator.addDeclaration('entry', declarationData);
     },
     modifyRenderData: generator.modifyRenderData,
     addDataLoaderImport: (declarationData: DeclarationData) => {
-      generator.addDeclaration('dataLoaderImport', {
-        ...declarationData,
-        declarationType: DeclarationType.NORMAL,
-      });
+      generator.addDeclaration('dataLoaderImport', declarationData);
     },
     getExportList: (registerKey: string) => {
       return generator.getExportList(registerKey);
@@ -239,7 +213,7 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
 
   // get userConfig after setup because of userConfig maybe modified by plugins
   const { userConfig } = ctx;
-  const { routes: routesConfig, server, syntaxFeatures, polyfill, output: { distType } } = userConfig;
+  const { routes: routesConfig, server, syntaxFeatures, polyfill } = userConfig;
 
   const coreEnvKeys = getCoreEnvKeys();
 
@@ -270,6 +244,8 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
   // Only when code splitting use the default strategy or set to `router`, the router will be lazy loaded.
   const lazy = [true, 'chunks', 'page', 'page-vendors'].includes(userConfig.codeSplitting);
   const { routeImports, routeDefinition } = getRoutesDefinition(routesInfo.routes, lazy);
+  const loaderExports = hasExportAppData || Boolean(routesInfo.loaders);
+  const hasDataLoader = Boolean(userConfig.dataLoader) && loaderExports;
   // add render data
   generator.setRenderData({
     ...routesInfo,
@@ -286,16 +262,15 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
     // Enable react-router for web as default.
     enableRoutes: true,
     entryCode,
-    jsOutput: distType.includes('javascript'),
-    hasDocument: fse.existsSync(path.join(rootDir, 'src/document.tsx')) || fse.existsSync(path.join(rootDir, 'src/document.jsx')) || fse.existsSync(path.join(rootDir, 'src/document.js')),
+    hasDocument: hasDocument(rootDir),
     dataLoader: userConfig.dataLoader,
+    hasDataLoader,
     routeImports,
     routeDefinition,
   });
   dataCache.set('routes', JSON.stringify(routesInfo));
   dataCache.set('hasExportAppData', hasExportAppData ? 'true' : '');
 
-  const hasDataLoader = Boolean(userConfig.dataLoader) && (hasExportAppData || Boolean(routesInfo.loaders));
   // Render exports files if route component export dataLoader / pageConfig.
   renderExportsTemplate(
     {
@@ -378,8 +353,12 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
   );
 
   const appConfig: AppConfig = (await getAppConfig()).default;
-
-  updateRuntimeEnv(appConfig, { disableRouter });
+  updateRuntimeEnv(appConfig, {
+    disableRouter,
+    // The optimization for runtime size should only be enabled in production mode.
+    routesConfig: command !== 'build' || routesInfo.routesExports.length > 0,
+    dataLoader: command !== 'build' || loaderExports,
+  });
 
   return {
     run: async () => {

packages/ice/src/plugins/web/index.ts

@@ -6,33 +6,8 @@ import { logger } from '../../utils/logger.js';
 
 const plugin: Plugin = () => ({
   name: 'plugin-web',
-  setup: ({ registerTask, onHook, context, generator }) => {
+  setup: ({ registerTask, onHook, context }) => {
     const { commandArgs, command, userConfig } = context;
-
-    generator.addTargetExport({
-      specifier: [
-        'Meta',
-        'Title',
-        'Links',
-        'Scripts',
-        'FirstChunkCache',
-        'Data',
-        'Main',
-        'usePageAssets',
-      ],
-      types: [
-        'MetaType',
-        'TitleType',
-        'LinksType',
-        'ScriptsType',
-        'FirstChunkCacheType',
-        'DataType',
-        'MainType',
-      ],
-      source: '@ice/runtime',
-      target: 'web',
-    });
-
     const removeExportExprs = ['serverDataLoader', 'staticDataLoader'];
     // Remove dataLoader exports only when build in production
     // and configure to generate data-loader.js.

packages/ice/src/routes.ts

@@ -36,6 +36,15 @@ export async function generateRoutesInfo(
     }
   });
 
+  const routesExports = [];
+  const configExport = generateRouteConfig(routes, 'pageConfig', (str, imports) => {
+    routesExports.push(...imports);
+    return `${str}
+export default {
+  ${imports.map(([routeId, importKey]) => `'${routeId}': ${importKey},`).join('\n  ')}
+};`;
+  });
+
   return {
     routesCount,
     routeManifest,
@@ -46,12 +55,8 @@ export default {
   ${imports.map(([routeId, importKey]) => `'${routeId}': ${importKey},`).join('\n  ')}
 };` : '';
     }),
-    routesConfig: generateRouteConfig(routes, 'pageConfig', (str, imports) => {
-      return `${str}
-export default {
-  ${imports.map(([routeId, importKey]) => `'${routeId}': ${importKey},`).join('\n  ')}
-};`;
-    }),
+    routesConfig: configExport,
+    routesExports,
   };
 }