An imports transform unplugin based on babel inspired by babel-plugin-transform-imports.
Transform the imports from:
import { Check as MdiCheck } from "mdi-material-ui"; import { Check as MuiCheck, CheckBox } from "@mui/icons-material"; import { Check as PhCheck } from "phosphor-react"; import { merge } from "lodash";to:
import MdiCheck from "mdi-material-ui/Check"; import MuiCheck from "@mui/icons-material/Check"; import CheckBox from "@mui/icons-material/CheckBox"; import PhCheck from "phosphor-react/dist/icons/Check"; import merge from "lodash/merge";Development bundles can contain the full library which can lead to slower startup times. This is especially noticeable if you import from @mui/icons-material. Startup times can be approximately 6x slower than without named imports from the top-level API.
- Reference from MUI Minimizing bundle size #Development environment
You can save a lot of time if you use webpack.
There are rough test results with demo-craco on my device:
# without unplugin-transform-imports $ pnpm start webpack 5.70.0 compiled successfully in 22427 ms # with unplugin-transform-imports $ pnpm start webpack 5.70.0 compiled successfully in 3313 msYou can also use it as tree-shaking alternative for modules which is not using ESM like lodash.
# without unplugin-transform-imports $ du -h --max-depth=0 build 1.6M build # with unplugin-transform-imports $ du -h --max-depth=0 build 980K build# without unplugin-transform-imports du -h --max-depth=0 dist 280K dist # with unplugin-transform-imports du -h --max-depth=0 dist 220K distInstall:
npm i -D unplugin-transform-imports yarn add -D unplugin-transform-imports pnpm i -D unplugin-transform-importsUsage:
import transformImports from "unplugin-transform-imports"; // webpack transformImports.webpack(transformImportsOptions); // vite transformImports.vite(transformImportsOptions); // rollup transformImports.rollup(transformImportsOptions); // esbuild transformImports.esbuild(transformImportsOptions);You can check the demo for craco and vite:
const defaultOptions = { enforce = undefined, // "pre" | "post" | undefined cwd = defaultCwd, // default: process.cwd() modules = [], // See Module includes = ["**/*.{tsx,ts,jsx,js,mjs}"], excludes = ["node_modules"], parseOptions, // Optional. See: https://babeljs.io/docs/en/babel-parser#options transformOptions, // Optional. See: https://babeljs.io/docs/en/options };transformImports.vite({ modules: [ { path: "lodash", // the module name to replace }, // You can get the same results with these transform options: { path: "lodash", // the module name to replace transform: `\${moduleName}/\${importName}`, }, { path: "lodash", transform: (importName, moduleName) => `${moduleName}/${importName}`, }, ], }); // This will make: import { merge } from "lodash"; // be transformed to: import merge from "lodash/merge";There are three variables for the transform function and the transform template. They are importName, moduleName and constName. It's depends on the original code:
import { [importName] } from "[moduleName]"; // constName === importName import { [importName] as [constName] } from "[moduleName]";You can use them in a transform template:
const module = { path: "lodash", transform: `\${moduleName}/\${importName}/\${constName}`, };or in transform function:
const module = { path: "lodash", transform: (importName, moduleName, constName) => `${moduleName}/${importName}/${constName}`, };You can use transformImports() function directly without unplugin:
import transformImports from `unplugin-transform-imports/transformImports`; const transformedCode:string = transformImports( code, { modules, // See Module parseOptions, // Optional. See: https://babeljs.io/docs/en/babel-parser#options transformOptions, // Optional. See: https://babeljs.io/docs/en/options } );# init pnpm i # build pnpm build # install again to link production pnpm i ## go to the demo cd packages/demo-{theDemoPath}pnpm test