Fix: optimize runtime code when dataLoader is not defined (#6849)

* fix: optimize runtime code when dataLoader is not defined * fix: optimize options * fix: remove dataloader import in entry
alibaba · Apr 9, 2024 · 77155ba · 77155ba
1 parent 44ef63f
commit 77155ba
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 23 deletions.
diff --git a/.changeset/wicked-points-fetch.md b/.changeset/wicked-points-fetch.md
@@ -0,0 +1,6 @@
+---
+'@ice/runtime': patch
+'@ice/app': patch
+---
+
+feat: remove runtime code when loaders is not export
diff --git a/packages/ice/src/createService.ts b/packages/ice/src/createService.ts
@@ -247,6 +247,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,
@@ -265,13 +267,13 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
     entryCode,
     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(
     {
@@ -355,7 +357,11 @@ 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.
+    dataLoader: command !== 'build' || loaderExports,
+  });
 
   return {
     run: async () => {

diff --git a/packages/ice/src/utils/runtimeEnv.ts b/packages/ice/src/utils/runtimeEnv.ts
@@ -10,6 +10,7 @@ export interface Envs {
 }
 interface EnvOptions {
   disableRouter: boolean;
+  dataLoader: boolean;
 }
 
 const expandedEnvs = {};
@@ -50,24 +51,36 @@ export async function setEnv(
   process.env.ICE_CORE_ROUTER = 'true';
   process.env.ICE_CORE_ERROR_BOUNDARY = 'true';
   process.env.ICE_CORE_INITIAL_DATA = 'true';
+  // Set to false for compatibility with the old version.
+  process.env.ICE_CORE_REMOVE_DATA_LOADER = 'false';
 
   // set ssr and ssg env to false, for remove dead code in CSR.
   process.env.ICE_CORE_SSG = 'false';
   process.env.ICE_CORE_SSR = 'false';
 }
 
 export const updateRuntimeEnv = (appConfig: AppConfig, options: EnvOptions) => {
-  const { disableRouter } = options;
+  const { disableRouter, dataLoader } = options;
   if (!appConfig?.app?.errorBoundary) {
-    process.env['ICE_CORE_ERROR_BOUNDARY'] = 'false';
+    process.env.ICE_CORE_ERROR_BOUNDARY = 'false';
   }
   if (disableRouter) {
-    process.env['ICE_CORE_ROUTER'] = 'false';
+    process.env.ICE_CORE_ROUTER = 'false';
+  }
+  if (!dataLoader) {
+    process.env.ICE_CORE_REMOVE_DATA_LOADER = 'true';
   }
 };
 
 export function getCoreEnvKeys() {
-  return ['ICE_CORE_MODE', 'ICE_CORE_ROUTER', 'ICE_CORE_ERROR_BOUNDARY', 'ICE_CORE_INITIAL_DATA', 'ICE_CORE_DEV_PORT'];
+  return [
+    'ICE_CORE_MODE',
+    'ICE_CORE_ROUTER',
+    'ICE_CORE_ERROR_BOUNDARY',
+    'ICE_CORE_INITIAL_DATA',
+    'ICE_CORE_DEV_PORT',
+    'ICE_CORE_REMOVE_DATA_LOADER',
+  ];
 }
 
 export function getExpandedEnvs(): Record<string, string> {

diff --git a/packages/ice/templates/core/entry.client.tsx.ejs b/packages/ice/templates/core/entry.client.tsx.ejs
@@ -8,7 +8,7 @@ import * as app from '@/app';
 import createRoutes from './routes';
 <% } -%>
 <%- runtimeOptions.imports %>
-<% if (dataLoaderImport.imports) {-%><%-dataLoaderImport.imports%><% } -%>
+<% if (dataLoaderImport.imports && hasDataLoader) {-%><%-dataLoaderImport.imports%><% } -%>
 import type { RunClientAppOptions } from '@ice/runtime';
 
 const getRouterBasename = () => {
@@ -19,7 +19,7 @@ const getRouterBasename = () => {
 // Otherwise chunk of route component will pack @ice/jsx-runtime and depend on framework bundle.
 const App = <></>;
 
-<% if (!dataLoaderImport.imports) {-%>
+<% if (!dataLoaderImport.imports && hasDataLoader) {-%>
 let dataLoaderFetcher = (options) => {
   return window.fetch(options.url, options);
 }
@@ -39,8 +39,9 @@ const renderOptions: RunClientAppOptions = {
   basename: getRouterBasename(),
   hydrate: <%- hydrate %>,
   memoryRouter: <%- memoryRouter || false %>,
+<% if (hasDataLoader) { -%>
   dataLoaderFetcher,
-  dataLoaderDecorator,
+  dataLoaderDecorator,<% } -%>
   runtimeOptions: {
 <% if (runtimeOptions.exports) { -%>
   <%- runtimeOptions.exports %>

diff --git a/packages/runtime/src/appData.ts b/packages/runtime/src/appData.ts
@@ -1,4 +1,4 @@
-import type { AppExport, AppData, RequestContext } from './types.js';
+import type { AppExport, AppData, RequestContext, Loader } from './types.js';
 import { callDataLoader } from './dataLoader.js';
 
 /**
@@ -18,15 +18,17 @@ async function getAppData(appExport: AppExport, requestContext?: RequestContext)
     return null;
   }
 
-  let loader;
+  if (process.env.ICE_CORE_REMOVE_DATA_LOADER !== 'true') {
+    let loader: Loader;
 
-  if (typeof appDataLoaderConfig === 'function' || Array.isArray(appDataLoaderConfig)) {
-    loader = appDataLoaderConfig;
-  } else {
-    loader = appDataLoaderConfig.loader;
-  }
+    if (typeof appDataLoaderConfig === 'function' || Array.isArray(appDataLoaderConfig)) {
+      loader = appDataLoaderConfig;
+    } else {
+      loader = appDataLoaderConfig.loader;
+    }
 
-  return await callDataLoader(loader, requestContext);
+    return await callDataLoader(loader, requestContext);
+  }
 }
 
 export {

diff --git a/packages/runtime/src/routes.tsx b/packages/runtime/src/routes.tsx
@@ -185,10 +185,12 @@ export function createRouteLoader(options: RouteLoaderOptions): LoaderFunction {
 
   const getData = (requestContext: RequestContext) => {
     let routeData: any;
-    if (globalLoader) {
-      routeData = globalLoader.getData(routeId, { renderMode, requestContext });
-    } else {
-      routeData = callDataLoader(loader, requestContext);
+    if (process.env.ICE_CORE_REMOVE_DATA_LOADER !== 'true') {
+      if (globalLoader) {
+        routeData = globalLoader.getData(routeId, { renderMode, requestContext });
+      } else {
+        routeData = callDataLoader(loader, requestContext);
+      }
     }
     return routeData;
   };

diff --git a/packages/runtime/src/runClientApp.tsx b/packages/runtime/src/runClientApp.tsx
@@ -101,8 +101,10 @@ export default async function runClientApp(options: RunClientAppOptions) {
     await Promise.all(runtimeModules.statics.map(m => runtime.loadModule(m)).filter(Boolean));
   }
 
-  dataLoaderFetcher && setFetcher(dataLoaderFetcher);
-  dataLoaderDecorator && setDecorator(dataLoaderDecorator);
+  if (process.env.ICE_CORE_REMOVE_DATA_LOADER !== 'true') {
+    dataLoaderFetcher && setFetcher(dataLoaderFetcher);
+    dataLoaderDecorator && setDecorator(dataLoaderDecorator);
+  }
 
   if (!appData) {
     appData = await getAppData(app, requestContext);