如何在TS+Next.js+Less项目中减小AntD打包体积

你遇到的 SyntaxError: Cannot use import statement outside a module 报错，核心原因是：

• 你通过babel-plugin-import指定了加载AntD的es（ES模块）版本，但Next.js默认不会转译node_modules目录下的依赖
• Node.js服务端运行环境默认仅支持CommonJS模块，未转译的ES模块import语句无法被识别，直接抛出错误

额外的配置冗余问题：

• 你的babel配置中开启了style: true，和next-plugin-antd-less的样式处理逻辑冲突，会导致重复加载样式
• 自定义less文件中手动引入AntD默认主题，既会造成样式全量引入，也和插件的自动加载逻辑重复

步骤1：修改next.config.js #

添加transpilePackages配置，告诉Next.js需要转译AntD的ES模块：

// next.config.js
const withNextTranslate = require('next-translate');
const withAntdLess = require('next-plugin-antd-less');

// 如果你使用的Next.js版本低于13，没有内置transpilePackages，需要先安装next-transpile-modules
// const withTM = require('next-transpile-modules')(['antd']);

module.exports = withNextTranslate(withAntdLess({
  lessVarsFilePath: "./styles.antd.less",
  cssLoaderOptions: {},
  images: {
    domains: ["storage.googleapis.com"],
  },
  // 新增此行，Next.js 13+内置支持
  transpilePackages: ['antd'],

  webpack: (config) => {
    config.module.rules.push(
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8000,
              name: '[name].[hash:7].[ext]'
            }
          }
        ]
      }
    )
    return config;
  }
}));
// 低版本Next.js请把导出改成 withNextTranslate(withTM(withAntdLess({...})))

步骤2：修改.babelrc.js #

关闭babel-plugin-import的样式处理，交给next-plugin-antd-less统一处理：

// .babelrc.js
module.exports = {
    presets: [
        ['next/babel']
    ],
    plugins: [
        ['import',
            {
                libraryName: 'antd', 
                style: false, // 关闭babel的样式加载逻辑
                libraryDirectory: 'es',
            }
        ]
    ],
};

步骤3：修改自定义less文件 #

删除styles.antd.less中的@import '~antd/es/style/themes/default.less';语句，next-plugin-antd-less会自动加载AntD默认主题，你只需要在该文件中写需要覆盖的主题变量即可，避免全量引入样式。

修改完成后重新执行npm run build，你会看到各页面的First Load JS体积会出现明显差异，仅引入了当前页面用到的AntD组件代码，整体打包体积会减少30%~60%。

内容的提问来源于stack exchange，提问作者pokatore