Feat: support optimize package import (#6736)

* feat: support optimize package import * chore: comment * fix: optimize imports
alibaba · Jan 18, 2024 · 45c61db · 45c61db
1 parent f58d206
commit 45c61db
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 26 deletions.
diff --git a/.changeset/five-kids-sit.md b/.changeset/five-kids-sit.md
@@ -0,0 +1,7 @@
+---
+'@ice/rspack-config': patch
+'@ice/shared-config': patch
+'@ice/app': patch
+---
+
+feat: support optimize package import
diff --git a/.changeset/thin-ligers-taste.md b/.changeset/thin-ligers-taste.md
@@ -0,0 +1,5 @@
+---
+'@ice/bundles': patch
+---
+
+fix: update binding version for optimize imports
diff --git a/examples/with-antd5/ice.config.mts b/examples/with-antd5/ice.config.mts
@@ -2,4 +2,7 @@ import { defineConfig } from '@ice/app';
 
 export default defineConfig(() => ({
   ssg: false,
+  optimization: {
+    optimizePackageImport: true,
+  }
 }));
diff --git a/packages/bundles/package.json b/packages/bundles/package.json
@@ -45,7 +45,7 @@
     "zod": "^3.22.3",
     "zod-validation-error": "1.2.0",
     "terminal-link": "^2.1.1",
-    "@ice/pack-binding": "0.0.6",
+    "@ice/pack-binding": "0.0.8",
     "mime-types": "2.1.35"
   },
   "devDependencies": {

diff --git a/packages/ice/src/config.ts b/packages/ice/src/config.ts
@@ -352,6 +352,83 @@ const userConfig = [
   {
     name: 'optimization',
     validation: 'object',
+    setConfig: (config: Config, optimization: UserConfig['optimization'], context: UserConfigContext) => {
+      const { commandArgs } = context;
+      if (optimization?.optimizePackageImport) {
+        if (commandArgs.speedup) {
+          config.optimizePackageImports = [
+            ...new Set([
+              ...(Array.isArray(optimization?.optimizePackageImport) ? optimization?.optimizePackageImport : []),
+              // Buit-in packages is modified based on
+              // https://github.com/vercel/next.js/blob/7b73f1137b21c7b1fb1612c3389caaaadd18da65/packages/next/src/server/config.ts#L827
+              '@alifd/next',
+              '@ali/uni-api',
+              'lucide-react',
+              'date-fns',
+              'lodash-es',
+              'ramda',
+              'antd',
+              'react-bootstrap',
+              'ahooks',
+              '@ant-design/icons',
+              '@headlessui/react',
+              '@headlessui-float/react',
+              '@heroicons/react/20/solid',
+              '@heroicons/react/24/solid',
+              '@heroicons/react/24/outline',
+              '@visx/visx',
+              '@tremor/react',
+              'rxjs',
+              '@mui/material',
+              '@mui/icons-material',
+              'recharts',
+              'react-use',
+              '@material-ui/core',
+              '@material-ui/icons',
+              '@tabler/icons-react',
+              'mui-core',
+              'react-icons/ai',
+              'react-icons/bi',
+              'react-icons/bs',
+              'react-icons/cg',
+              'react-icons/ci',
+              'react-icons/di',
+              'react-icons/fa',
+              'react-icons/fa6',
+              'react-icons/fc',
+              'react-icons/fi',
+              'react-icons/gi',
+              'react-icons/go',
+              'react-icons/gr',
+              'react-icons/hi',
+              'react-icons/hi2',
+              'react-icons/im',
+              'react-icons/io',
+              'react-icons/io5',
+              'react-icons/lia',
+              'react-icons/lib',
+              'react-icons/lu',
+              'react-icons/md',
+              'react-icons/pi',
+              'react-icons/ri',
+              'react-icons/rx',
+              'react-icons/si',
+              'react-icons/sl',
+              'react-icons/tb',
+              'react-icons/tfi',
+              'react-icons/ti',
+              'react-icons/vsc',
+              'react-icons/wi',
+            ]),
+          ];
+        } else {
+          logger.warn(`
+            optimizePackageImport only works in speedup mode,
+            try to run \`npm ${commandArgs.command === 'start' ? 'start' : 'run build'} -- --speedup\``,
+          );
+        }
+      }
+    },
   },
   {
     name: 'mock',

diff --git a/packages/ice/src/types/userConfig.ts b/packages/ice/src/types/userConfig.ts
@@ -22,6 +22,12 @@ interface Optimization {
    * Remove react-router dependencies by force, even if route count is greater than 1.
    */
   disableRouter?: boolean;
+  /**
+   * Automatically the apply modularize imports optimization,
+   * it will remove unused code of package when it is a barrel file.
+   * Note: It is only supported in speedup mode.
+   */
+  optimizePackageImport?: string[] | boolean;
 }
 
 interface MinifyOptions {

diff --git a/packages/rspack-config/src/index.ts b/packages/rspack-config/src/index.ts
@@ -48,6 +48,7 @@ const getConfig: GetConfig = async (options) => {
   } = options;
 
   const {
+    cacheDir,
     mode,
     minify,
     publicPath = '/',
@@ -68,6 +69,7 @@ const getConfig: GetConfig = async (options) => {
     middlewares,
     configureWebpack = [],
     minimizerOptions = {},
+    optimizePackageImports = [],
   } = taskConfig || {};
   const isDev = mode === 'development';
   const absoluteOutputDir = path.isAbsolute(outputDir) ? outputDir : path.join(rootDir, outputDir);
@@ -154,6 +156,7 @@ const getConfig: GetConfig = async (options) => {
               transformFeatures: {
                 removeExport: swcOptions.removeExportExprs,
                 keepExport: swcOptions.keepExports,
+                optimizeImport: optimizePackageImports,
               },
               compileRules: {
                 // "bundles/compiled" is the path when using @ice/bundles.
@@ -162,6 +165,21 @@ const getConfig: GetConfig = async (options) => {
             },
           },
         },
+        {
+          test: /__barrel_optimize__/,
+          use: ({ realResource }: { realResource: string }) => {
+            const names = (
+              realResource.match(/\?names=([^&]+)!=!/)?.[1] || ''
+            ).split(',');
+            return [{
+              loader: 'builtin:barrel-loader',
+              options: {
+                names,
+                cacheDir,
+              },
+            }];
+          },
+        },
         ...getAssetsRule(),
         ...getCssRules({
           rootDir,

diff --git a/packages/shared-config/src/types.ts b/packages/shared-config/src/types.ts
@@ -205,4 +205,6 @@ export interface Config {
   useDevServer?: boolean;
 
   useDataLoader?: boolean;
+
+  optimizePackageImports?: string[];
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml