fix: reduce MUI size by using @swc/plugin-transform-imports

Author: pionxzh

.gitignore

@@ -15,6 +15,7 @@ tsconfig.tsbuildinfo
 .eslintcache
 node_modules
 
+.swc
 .next
 .vercel
 coverage

package.json

@@ -82,6 +82,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
     "@swc/core": "^1.3.26",
+    "@swc/plugin-transform-imports": "^1.5.36",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",

rollup.config.ts

@@ -27,7 +27,7 @@ const external = [
   '@emotion/react/jsx-runtime',
   '@emotion/react/jsx-dev-runtime',
   '@mui/material',
-  '@mui/material/styles',
+  /@mui\/material\/.*/,
   'copy-to-clipboard',
   'zustand',
   'zustand/context',
@@ -48,7 +48,9 @@ const outputMatrix = (
     format,
     banner: `/// <reference types="./${baseName}.d.ts" />`,
     globals: external.reduce((object, module) => {
-      object[module] = module
+      if (typeof module === 'string') {
+        object[module] = module
+      }
       return object
     }, {} as Record<string, string>)
   }))
@@ -102,6 +104,20 @@ const buildMatrix = (input: string, output: string, config: {
               runtime: 'automatic',
               importSource: '@emotion/react'
             }
+          },
+          experimental: {
+            plugins: config.browser
+              ? []
+              : [
+                  [
+                    '@swc/plugin-transform-imports',
+                    {
+                      '@mui/material': {
+                        transform: '@mui/material/{{member}}'
+                      }
+                    }
+                  ]
+                ]
           }
         }
       }))
@@ -125,7 +141,7 @@ const dtsMatrix = (): RollupOptions[] => {
 
 const build: RollupOptions[] = [
   buildMatrix('./src/index.tsx', 'index', {
-    format: ['es', 'umd'],
+    format: ['es', 'cjs'],
     browser: false,
     dts: true
   }),

yarn.lock

@@ -1747,6 +1747,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/plugin-transform-imports@npm:^1.5.36":
+  version: 1.5.36
+  resolution: "@swc/plugin-transform-imports@npm:1.5.36"
+  checksum: b47cbb9bdd29d20ac391050ac19afe862cc3bd86c17de5405789ff2e815e710d4ad2ab3356427c73a0b6da11f8757f707171cbd2ad325970f29af525dfb654e2
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^8.5.0":
   version: 8.18.1
   resolution: "@testing-library/dom@npm:8.18.1"
@@ -1810,6 +1817,7 @@ __metadata:
     "@rollup/plugin-node-resolve": ^15.0.1
     "@rollup/plugin-replace": ^5.0.2
     "@swc/core": ^1.3.26
+    "@swc/plugin-transform-imports": ^1.5.36
     "@testing-library/react": ^13.4.0
     "@types/node": ^18.11.18
     "@types/react": ^18.0.26