如何配置Rollup让动态导入指向.gz.js文件而非.js文件？

核心问题 #

当前配置会同时生成未压缩的.js和压缩后的.gz.js文件，但Rollup默认生成的import语句仍指向原.js文件，需要调整配置或通过插件修改引用路径。

具体解决方法 #

方法1：直接修改输出文件名规则（无需保留原.js文件） #

如果不需要保留未压缩的.js文件，可以让Rollup直接生成带.gz.js后缀的主文件，这样import语句会自动指向正确路径：

output: {
    format: 'es',
    dir: `dist`,
    sourcemap: true,
    entryFileNames: '[name].gz.js',
    chunkFileNames: '[name]-[hash].gz.js'
},

此时gzip插件只需正常压缩生成对应文件即可，若不需要原.js文件，也可按需调整插件逻辑。

方法2：用替换插件批量修改import路径 #

使用@rollup/plugin-replace替换输出文件中所有import语句的.js后缀为.gz.js：

1. 安装插件：

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

2. 修改Rollup配置：

import replace from '@rollup/plugin-replace';

plugins: [
    // 其他已有插件...
    replace({
        preventAssignment: true,
        include: 'dist/**/*.js',
        values: {
            '.js': '.gz.js'
        }
    }),
    gzipPlugin({
        fileName: (fileName) => {
            const name = fileName.split('.');
            name.splice(-1, 0, 'gz');
            return name.join('.');
        },
    })
]

该插件会在打包阶段自动替换所有匹配的.js后缀，无论chunk是否带哈希值都能生效。

方法3：自定义插件灵活修改引用路径 #

如果替换插件的规则不够灵活，可编写自定义插件在bundle生成阶段修改代码：

const modifyImportsPlugin = () => ({
    name: 'modify-imports',
    generateBundle(options, bundle) {
        for (const fileName in bundle) {
            const chunk = bundle[fileName];
            if (chunk.type === 'chunk') {
                // 替换所有import语句中的.js为.gz.js
                chunk.code = chunk.code.replace(/from ['"](.*)\.js['"]/g, 'from "$1.gz.js"');
                // 若不需要sourcemap，可删除以下代码；若需要，建议让Rollup重新生成sourcemap
                if (chunk.map) delete chunk.map;
            }
        }
    }
});

// 在插件列表中添加该自定义插件
plugins: [
    // 其他已有插件...
    modifyImportsPlugin(),
    gzipPlugin({
        fileName: (fileName) => {
            const name = fileName.split('.');
            name.splice(-1, 0, 'gz');
            return name.join('.');
        },
    })
]

这个插件会遍历所有输出chunk，精准替换import语句中的文件后缀。

额外提示 #

如果需要同时保留.js和.gz.js文件供不同环境使用，更推荐通过服务器配置实现自动分发（比如Nginx的gzip_static模块），当客户端支持gzip时自动返回.gz.js，无需修改Rollup的import路径，这样更符合前端资源分发的最佳实践。

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