fix: reduce MUI size by using @swc/plugin-transform-imports (#169)

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

* style: apply ESLint rules to enforce correct import path

* fix: fix eslint error message

* fix: add rule for `@mui/material/styles`

* ci: rewrite MUI import differently for esm and cjs

* fix: prevent directory import in ESM build

Author: pionxzh

.eslintrc.js

@@ -88,6 +88,15 @@ module.exports = {
     '@typescript-eslint/no-restricted-imports': [
       'error',
       {
+        paths: [
+          {
+            name: '@mui/material',
+            importNames: ['styled', 'createTheme', 'ThemeProvider'],
+            message: `
+Use "import { styled } from '@mui/material/styles'" instead.
+Use "import { createTheme, ThemeProvider } from '@mui/material/styles'" instead.`
+          }
+        ],
         patterns: [
           {
             group: ['**/dist'],

.gitignore

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

package.json

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

rollup.config.ts

@@ -8,26 +8,21 @@ import replace from '@rollup/plugin-replace'
 import type {
   ModuleFormat,
   OutputOptions,
-  RollupCache,
   RollupOptions
 } from 'rollup'
 import dts from 'rollup-plugin-dts'
 import { defineRollupSwcOption, swc } from 'rollup-plugin-swc3'
 import { fileURLToPath } from 'url'
 
-let cache: RollupCache
-
-const dtsOutput = new Set<[string, string]>()
-
 const outputDir = fileURLToPath(new URL('dist', import.meta.url))
 
-const external = [
+const externalDeps = [
   '@emotion/react',
   '@emotion/styled',
   '@emotion/react/jsx-runtime',
   '@emotion/react/jsx-dev-runtime',
   '@mui/material',
-  '@mui/material/styles',
+  /@mui\/material\/.*/,
   'copy-to-clipboard',
   'zustand',
   'zustand/context',
@@ -37,17 +32,50 @@ const external = [
   'react-dom',
   'react-dom/client'
 ]
+
+const aliasPlugin = alias({
+  entries: [
+    { find: 'react', replacement: '@emotion/react' },
+    { find: 'react/jsx-runtime', replacement: '@emotion/react/jsx-runtime' },
+    { find: 'react/jsx-dev-runtime', replacement: '@emotion/react/jsx-dev-runtime' }
+  ]
+})
+
+const replacePlugin = replace({
+  preventAssignment: true,
+  'process.env.NODE_ENV': JSON.stringify('production'),
+  'typeof window': JSON.stringify('object')
+})
+
+const esmTransformImportsPlugin: [string, Record<string, any>] = [
+  '@swc/plugin-transform-imports',
+  {
+    '@mui/material': { transform: '@mui/material/{{member}}/index.js' },
+    '@mui/material/styles': { transform: '@mui/material/styles/{{member}}.js' }
+  }
+]
+
+const cjsTransformImportsPlugin: [string, Record<string, any>] = [
+  '@swc/plugin-transform-imports',
+  {
+    '@mui/material': { transform: '@mui/material/node/{{member}}' },
+    '@mui/material/styles': { transform: '@mui/material/node/styles/{{member}}' }
+  }
+]
+
 const outputMatrix = (
   name: string, format: ModuleFormat[]): OutputOptions[] => {
   const baseName = basename(name)
-  return format.flatMap(format => ({
+  return format.map(format => ({
     file: resolve(outputDir, `${baseName}.${format === 'es' ? 'm' : ''}js`),
     sourcemap: false,
     name: 'JsonViewer',
     format,
     banner: `/// <reference types="./${baseName}.d.ts" />`,
-    globals: external.reduce((object, module) => {
-      object[module] = module
+    globals: externalDeps.reduce((object, module) => {
+      if (typeof module === 'string') {
+        object[module] = module
+      }
       return object
     }, {} as Record<string, string>)
   }))
@@ -56,84 +84,64 @@ const outputMatrix = (
 const buildMatrix = (input: string, output: string, config: {
   format: ModuleFormat[]
   browser: boolean
-  dts: boolean
-}): RollupOptions => {
-  if (config.dts) {
-    dtsOutput.add([input, output])
-  }
-  return {
-    input,
-    output: outputMatrix(output, config.format),
-    cache,
-    external: config.browser ? [] : external,
-    plugins: [
-      alias({
-        entries: config.browser
-          ? []
-          : [
-              { find: 'react', replacement: '@emotion/react' },
-              {
-                find: 'react/jsx-dev-runtime',
-                replacement: '@emotion/react/jsx-dev-runtime'
-              },
-              {
-                find: 'react/jsx-runtime',
-                replacement: '@emotion/react/jsx-runtime'
+}): RollupOptions[] => {
+  return [
+    ...config.format.map(format => ({
+      input,
+      output: outputMatrix(output, [format]),
+      external: config.browser ? [] : externalDeps,
+
+      plugins: [
+        !config.browser && aliasPlugin,
+        config.browser && replacePlugin,
+        commonjs(),
+        nodeResolve(),
+        swc(defineRollupSwcOption({
+          jsc: {
+            externalHelpers: true,
+            parser: {
+              syntax: 'typescript',
+              tsx: true
+            },
+            transform: {
+              react: {
+                runtime: 'automatic',
+                importSource: '@emotion/react'
               }
-            ]
-      }),
-      config.browser && replace({
-        preventAssignment: true,
-        'process.env.NODE_ENV': JSON.stringify('production'),
-        'typeof window': JSON.stringify('object')
-      }),
-      commonjs(),
-      nodeResolve(),
-      swc(defineRollupSwcOption({
-        jsc: {
-          externalHelpers: true,
-          parser: {
-            syntax: 'typescript',
-            tsx: true
-          },
-          transform: {
-            react: {
-              runtime: 'automatic',
-              importSource: '@emotion/react'
+            },
+            experimental: {
+              plugins: config.browser
+                ? []
+                : format === 'es'
+                  ? [esmTransformImportsPlugin]
+                  : [cjsTransformImportsPlugin]
             }
           }
-        }
-      }))
-    ]
-  }
-}
-
-const dtsMatrix = (): RollupOptions[] => {
-  return [...dtsOutput.values()].flatMap(([input, output]) => ({
-    input,
-    cache,
-    output: {
-      file: resolve(outputDir, `${output}.d.ts`),
-      format: 'es'
-    },
-    plugins: [
-      dts()
-    ]
-  }))
+        }))
+      ]
+    })),
+    {
+      input,
+      output: {
+        file: resolve(outputDir, `${output}.d.ts`),
+        format: 'es'
+      },
+      plugins: [
+        dts()
+      ]
+    }
+  ]
 }
 
 const build: RollupOptions[] = [
-  buildMatrix('./src/index.tsx', 'index', {
-    format: ['es', 'umd'],
-    browser: false,
-    dts: true
+  ...buildMatrix('./src/index.tsx', 'index', {
+    format: ['es', 'cjs'],
+    browser: false
   }),
-  buildMatrix('./src/browser.tsx', 'browser', {
+  ...buildMatrix('./src/browser.tsx', 'browser', {
     format: ['es', 'umd'],
-    browser: true,
-    dts: true
-  }),
-  ...dtsMatrix()
+    browser: true
+  })
 ]
 
 export default build

src/index.tsx

@@ -1,7 +1,5 @@
-import {
-  createTheme, Paper,
-  ThemeProvider
-} from '@mui/material'
+import { Paper } from '@mui/material'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { DataKeyPair } from './components/DataKeyPair'

yarn.lock

@@ -1721,6 +1721,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"
@@ -1784,6 +1791,7 @@ __metadata:
     "@rollup/plugin-node-resolve": ^15.0.1
     "@rollup/plugin-replace": ^5.0.2
     "@swc/core": ^1.3.27
+    "@swc/plugin-transform-imports": ^1.5.36
     "@testing-library/react": ^13.4.0
     "@types/node": ^18.11.18
     "@types/react": ^18.0.27