如何用Rollup构建Tabulator的摇树优化打包文件？

问题核心在于你当前导入的是Tabulator预打包的ESM入口文件，这类文件已经整合了所有可选模块，导致Rollup无法通过Tree Shaking剔除未使用的代码。下面分两种场景给出具体解决方案：

场景1：使用下载的独立ESM模块文件 #

1. 放弃使用tabulator_esm.js，转而下载Tabulator提供的拆分式ESM文件：
   • 核心模块：tabulator_core_esm.js
   • 需要的可选模块：比如格式化模块format.module_esm.js、编辑模块edit.module_esm.js（按需下载对应模块）
2. 修改你的tabulator_rollup.js，单独导入核心和目标模块：

   import Tabulator from './tabulator_core_esm';
   import FormatModule from './format.module_esm';
   import EditModule from './edit.module_esm';
   
   Tabulator.registerModule([FormatModule, EditModule]);
   
   const table = new Tabulator("#example-table", {
     // 你的表格配置项
   });
   

3. 重新执行Rollup打包命令：

   rollup tabulator_rollup.js --file tabulator_bundle.js --format iife
   

场景2：使用npm安装的Tabulator包 #

1. 调整导入路径，直接从Tabulator的源码目录导入核心和单个模块，避免使用主入口（主入口已整合所有模块）：

   import Tabulator from 'tabulator-tables/src/js/core/tabulator';
   import FormatModule from 'tabulator-tables/src/js/modules/format';
   import EditModule from 'tabulator-tables/src/js/modules/edit';
   
   Tabulator.registerModule([FormatModule, EditModule]);
   
   const table = new Tabulator("#example-table", {
     // 你的表格配置项
   });
   

2. 更新Rollup配置，确保Tree Shaking生效并处理依赖：

   import resolve from '@rollup/plugin-node-resolve';
   import commonjs from '@rollup/plugin-commonjs';
   
   export default {
     input: 'tabulator_rollup.js',
     output: {
       file: 'tabulator_bundle.js',
       format: 'iife',
       sourcemap: false
     },
     plugins: [
       resolve({ browser: true }),
       commonjs()
     ],
     treeshake: {
       moduleSideEffects: false,
       propertyReadSideEffects: false
     }
   };
   

3. 以生产模式执行打包，让Rollup更彻底地剔除无用代码：

   rollup -c --environment NODE_ENV:production
   

额外注意：如果使用Babel转译，需确保配置不会破坏Tree Shaking（比如避免使用会保留所有模块的预设）。

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