使用模块别名时，如何阻止NextJS将动态导入组件打包进_app.js主包？

问题描述 #

在NextJS 11项目中，通过@nx/next:library配置了模块别名@my-site/shared-ui，所有组件通过库根目录的index.ts统一导出：

export { default as MobileTabs } from './components/MobileTabs'

页面中采用动态导入方式引入组件：

const MobileTabs = dynamic(
  () => import('@my-site/shared-ui').then((module) => module.MobileTabs),
)

但构建或运行后发现，MobileTabs并未生成独立chunk，而是被打包进了_app.js主包。改用相对路径直接导入组件时能正常生成独立chunk，但会触发ESLint报错导致无法构建，希望保留模块别名的同时解决chunk拆分问题。

原因分析 #

这是Webpack tree-shaking机制和模块导出结构共同导致的问题：

• 当从@my-site/shared-ui根模块导入并提取单个组件时，Webpack会默认认为可能依赖整个模块的导出内容，加上NextJS默认打包策略，容易将整个共享UI模块打包进主chunk，无法精准拆分单个组件。
• NX的library默认配置可能未开启针对单个组件的代码拆分支持，进一步限制了Webpack的chunk拆分能力。

解决方案 #

1. 调整共享UI库的导出结构 #

不要仅通过根index.ts统一导出组件，给每个组件单独设置可直接导入的入口：

• 在shared-ui/components/MobileTabs目录下创建index.ts：

  export { default } from './MobileTabs'
  

• 保留根index.ts的原有导出，同时支持通过@my-site/shared-ui/components/MobileTabs直接导入单个组件。

2. 修改动态导入的路径 #

直接指向组件的具体模块路径，而非从根模块中提取：

const MobileTabs = dynamic(
  () => import('@my-site/shared-ui/components/MobileTabs'),
)

这样Webpack能精准识别仅需打包该组件的代码，自动生成独立chunk。

3. 配置ESLint允许深层模块别名导入 #

针对ESLint报错问题，在项目的.eslintrc.json中调整规则，允许从共享UI库的子路径导入：

{
  "rules": {
    "import/no-internal-modules": ["error", {
      "allow": ["@my-site/shared-ui/components/**"]
    }]
  }
}

如果是NX专属的导入限制规则，找到对应规则并添加允许的路径前缀即可。

4. 检查NX与Webpack的Tree-shaking配置 #

• 确保NX的library配置开启了buildable选项，生成的库会具备更好的tree-shaking支持；
• 在NextJS的next.config.js中确认Webpack优化配置未禁用tree-shaking：

  module.exports = {
    webpack: (config) => {
      config.optimization.minimize = true;
      config.optimization.splitChunks = {
        chunks: 'all',
      };
      return config;
    },
  };
  

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