如何在NextJS中对Chakra UI进行Tree Shaking优化？

当你用import {Box} from '@chakra-ui/react';导入单个组件，但生产构建时却打包了整个Chakra UI库，试试下面这些方案：

• 直接导入组件源码文件
  跳过主包入口，直接引用组件的具体路径：

  import Box from '@chakra-ui/react/dist/components/box/box';
  

  这种方式能强制只打包你用到的组件代码，彻底避免主包的全量引入。

• 配置Next.js的SWC与Webpack优化
  在next.config.js中添加以下配置，确保SWC和Webpack都开启Tree Shaking相关优化：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    swcMinify: true,
    webpack: (config) => {
      // 启用usedExports让Webpack识别未使用的导出
      config.optimization.usedExports = true;
      // 开启providedExports确保模块导出信息被正确解析
      config.optimization.providedExports = true;
      return config;
    },
  };
  
  module.exports = nextConfig;
  

  SWC默认支持Tree Shaking，但需要配合Webpack的优化配置才能在生产构建中生效，没必要退回到Babel。

• 确认Chakra UI的模块格式
  确保你使用的是支持ES模块（ESM）的Chakra UI版本，Tree Shaking依赖ESM的静态导出结构，CommonJS格式的包无法被有效摇树。建议升级到最新稳定版。

• 杜绝全局导入写法
  避免使用import * as Chakra from '@chakra-ui/react';这类全局导入，保持按需导入单个组件的习惯，让SWC能清晰识别哪些代码是未使用的。

内容的提问来源于stack exchange，提问作者Данияр Булдаков