如何排查Rollup chunk中未使用代码的导入原因及禁止导入

1. 为什么chunk-index.es.fbfa066e.js会被包含在projects.page.client.f6019eee.js的导入中？该如何调试？ #

这种情况基本是依赖传递触发的：你当前页面直接导入的chunk-Table.31bce020.js或chunk-Tabs.0cbe576c.js，内部间接依赖了slate、immer、is-plain-object这三个包，打包工具（Rollup或基于它的构建工具）为了复用代码，把这些共享依赖抽成了单独的chunk-index.es.fbfa066e.js，所以页面chunk会自动引入这个共享chunk。

调试方法：

• 给Rollup添加--verbose或--debug参数执行打包，查看输出的依赖追踪日志，能定位到具体是哪个模块触发了该chunk的引入
• 安装rollup-plugin-visualizer插件，生成可视化的依赖图谱，直观查看各个chunk的依赖链路，找到间接依赖的源头
• 直接检查chunk-Table.31bce020.js和chunk-Tabs.0cbe576c.js的源码，确认它们是否导入了slate、immer或is-plain-object的内容

2. projects.page.client.f6019eee.js未导入其导出内容，是如何使用该chunk的？ #

主要有两种可能：

• 副作用代码执行：该chunk中的某个模块包含副作用逻辑——比如挂载全局变量、注册全局事件、执行初始化操作等，这类代码不需要显式调用导出内容，只要模块被导入就会自动执行
• 打包工具静态分析误判：如果某个依赖模块使用了动态加载（比如eval、动态require）或者通过window等全局对象隐式访问变量，Rollup无法静态分析出这些代码是否被使用，就会保留整个chunk并让页面导入
• 另外，如果用的是Next.js这类框架，也可能是框架自动预加载：框架认为该chunk后续可能被用到，提前预加载了它，哪怕当前页面实际没用到

3. 如何配置Rollup使其不导入该chunk？ #

分场景处理：

场景1：chunk包含不必要的副作用代码 #

检查三个第三方包的package.json，如果它们的sideEffects字段设为true，可以在Rollup配置中精准禁用指定模块的副作用：

export default {
  treeshake: {
    moduleSideEffects: (id) => {
      // 排除目标模块的副作用，其他模块保持默认
      return !(
        id.includes('slate/dist/index.es.js') ||
        id.includes('immer/dist/immer.esm.mjs') ||
        id.includes('is-plain-object/dist/is-plain-object.mjs')
      );
    }
  }
};

场景2：依赖传递但实际未被使用 #

• 确保Rollup开启了摇树优化（默认treeshake: true），可以进一步调整参数增强效果：

  export default {
    treeshake: {
      propertyReadSideEffects: false, // 禁用属性读取的副作用判定
      tryCatchDeoptimization: false // 避免try/catch块导致摇树失效
    }
  };
  

• 如果第三方包是CommonJS格式，先使用@rollup/plugin-commonjs转成ES模块，再配合摇树优化

场景3：框架自动预加载导致 #

查看你使用的框架文档，关闭对应的预加载配置。比如Next.js中，可以用dynamic导入组件并关闭预加载：

import dynamic from 'next/dynamic';

const Table = dynamic(() => import('../components/Table'), {
  ssr: false,
  loading: () => null,
  preload: false // 关闭预加载
});

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