Rollup设置sideEffects为false仍无法正确Tree Shaking D3.js？

问题本质说明 #

你遇到的不是Tree Shaking失效，而是对D3模块的体积预期有误：

• D3的d3-selection模块并非只包含select函数本身，它内部依赖了大量必要的基础逻辑：比如DOM节点匹配、上下文绑定、跨浏览器兼容处理、基础工具函数等，这些都是select方法正常工作的前提。Tree Shaking已经剔除了真正冗余的代码（比如你没用到的selectAll、data相关逻辑），剩下的近千行是核心依赖代码。
• sideEffects: false和moduleSideEffects: false已经正确配置，Rollup确实在执行Tree Shaking，只是D3的模块设计决定了单个API也需要不少支撑代码。

可行优化方案 #

1. 启用代码压缩（最实用） #

添加Rollup的Terser插件压缩混淆代码，能大幅减小最终bundle体积：

• 安装依赖：

npm install @rollup/plugin-terser --save-dev

• 修改rollup.config.js：

import resolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser';

export default {
    input: 'index.js',
    output: {
        file: 'index.bundle.js',
        format: 'iife'
    },
    treeshake: {
        moduleSideEffects: false
    },
    plugins: [
        resolve(),
        terser() // 启用压缩混淆
    ],
}

压缩后select相关代码的体积会从几百KB降到十几KB，完全符合浏览器端使用需求。

2. 替换为轻量化替代库 #

如果只需要最基础的DOM选择功能，完全可以用更小巧的库替代d3-selection：

• 比如dom-select：仅实现选择器功能，体积不到1KB
• 或者mini-d3-selection：提取了D3选择器的核心逻辑，体积远小于官方模块

3. 手动提取核心代码（适合极端场景） #

从d3-selection的源码中手动提取select相关的最小依赖集，比如只保留select函数、matches工具、namespace处理等核心逻辑，但这种方式维护成本高，仅适合对体积有极致要求的场景。

认知误区纠正 #

• 不要认为“只导入一个函数就应该只有几行代码”：很多工具库的单个API依赖大量底层支撑逻辑，尤其是像D3这种注重兼容性和功能完整性的库。
• sideEffects配置已经生效：Rollup不会打包d3-selection中你没用到的模块（比如selection-multi相关代码），你可以查看打包后的代码，确认没有包含selectAll、data等未使用的API。

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