Eleventy(11ty)+Vite构建后生成无效JS文件引用问题求助

问题现象 #

生产构建后，生成的HTML文件中插入了两个指向不存在的index-*.js的script标签；同时实际生成的JS文件开头包含对不存在文件的导入语句，导致浏览器无法解析JS文件并报错。

问题根源 #

1. rollup-plugin-critical 配置冲突：该插件被添加到Vite的Rollup插件列表后，会错误地将Eleventy生成的HTML页面当作Rollup入口文件处理，从而生成多余的index-*.js文件，并插入无效的导入语句。
2. 重复的文件复制配置：同时设置addPassthroughCopy('src/assets/js')和Vite的JS处理逻辑，导致原始JS文件被复制到输出目录，与Vite打包后的文件产生路径冲突。

修复步骤 #

1. 移除冲突的Rollup插件 #

删除.eleventy.js中Vite配置内的rollup-plugin-critical插件，避免它干扰Vite的正常打包流程。若需处理Critical CSS，改用Eleventy的transform实现。

2. 取消手动复制JS文件 #

移除eleventyConfig.addPassthroughCopy('src/assets/js')，让Vite完全负责JS文件的打包、哈希命名与输出，无需手动复制原始文件。

3. 调整后的核心配置示例 #

修改后的.eleventy.js关键部分如下：

// ... 其他配置保持不变
eleventyConfig.addPlugin(EleventyVitePlugin, {
    tempFolderName: '.11ty-vite',

    viteOptions: {
        publicDir: 'public',
        clearScreen: false,
        server: {
            mode: 'development',
            middlewareMode: true
        },
        appType: 'custom',
        assetsInclude: ['**/*.xml', '**/*.txt'],
        build: {
            mode: 'production',
            
            rollupOptions: {
                output: {
                    assetFileNames: (assetInfo) => {
                        let extType = assetInfo.name.split('.').at(1)
                        if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
                            extType = 'images'
                        }
                        return `assets/${extType}/[name]-[hash][extname]`
                    },
                    chunkFileNames: 'assets/js/[name]-[hash].js',
                    entryFileNames: 'assets/js/[name]-[hash].js'
                }
                // 移除rollup-plugin-critical插件配置
            }
        }
    }
})
// ... 其他配置保持不变

// 删除此行：eleventyConfig.addPassthroughCopy('src/assets/js')

4. （可选）用Eleventy Transform处理Critical CSS #

若需内联Critical CSS，可在Eleventy的transform中使用critical库，示例如下：

// 在utils/transforms.js中添加
const critical = require('critical');

exports.criticalCSS = async function(content, outputPath) {
    if (outputPath && outputPath.endsWith('.html')) {
        try {
            const result = await critical.generate({
                inline: true,
                base: './_site/',
                src: outputPath.split('/').pop(),
                target: {
                    html: outputPath
                },
                width: 1200,
                height: 900
            });
            return result.html;
        } catch (err) {
            console.error('Critical CSS生成错误:', err);
            return content;
        }
    }
    return content;
}

随后在.eleventy.js中注册该transform：

eleventyConfig.addTransform('criticalCSS', transforms.criticalCSS);

修复效果 #

重新执行生产构建后：

• HTML中只会生成一个指向正确打包后的main-*.js的script标签
• 生成的JS文件无无效导入语句
• 浏览器可正常解析JS文件，不再报错

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