使用RollupJS多入口插件与Uglify插件时的文件压缩问题

架构老林

2026-5-28

嘿，我来帮你搞定这个多文件打包压缩的问题～

首先，你提到的IDE代码颜色没变化，本质是压缩插件没真正生效——单文件时uglify能正常工作，但多文件场景下出了问题，大概率是插件兼容或配置的问题，咱们一步步来排查：

1. 替换老旧的`rollup-plugin-uglify`

rollup-plugin-uglify已经停止维护了，它对ES6+语法的支持很差，而rollup-plugin-multi-entry合并后的代码可能包含现代JS语法，导致uglify无法正确解析和压缩。建议换成官方推荐的@rollup/plugin-terser，它是uglify的升级版，完美支持现代JS：

先安装插件：

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

2. 调整Rollup配置

修改你的配置文件，替换uglify为terser，同时确保babel插件的配置正确（如果用的是新版@rollup/plugin-babel，需要指定babelHelpers参数）：

import multiEntry from 'rollup-plugin-multi-entry';
import babel from '@rollup/plugin-babel';
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/scripts/components/bootstrap/*.js',
  output: {
    file: 'bootstrapped.min.js',
    format: 'cjs'
  },
  plugins: [
    multiEntry(), // 先合并多入口文件
    babel({ babelHelpers: 'bundled' }), // 转译语法，确保terser能处理
    terser() // 默认配置即可完成压缩，无需传空对象
  ]
};

3. 逐步排查验证

如果修改后还是有问题，可以分步测试：

先去掉babel插件，只保留multiEntry和terser，看生成的文件是否被压缩。如果生效，说明是babel的配置干扰了压缩；
检查multiEntry是否正确识别了所有文件：可以临时在配置里打印一下解析后的input列表，确认所有目标JS都被包含；
查看生成的bootstrapped.min.js内容，如果还是未压缩的代码，检查插件是否正确安装、导入，Rollup版本是否和插件兼容（建议用Rollup v2+版本）。