Svelte应用Rollup每次构建未修改文件哈希都变化如何配置实现长期缓存

核心问题原因 #

默认Rollup配置下哈希计算未绑定单文件内容，加上Svelte编译、压缩插件的不稳定输出，会导致无修改构建时所有文件哈希刷新，无法实现长效缓存。

具体配置调整 #

1. 替换哈希占位符为内容哈希 #

不要使用全局构建哈希[hash]，改用仅与单文件内容绑定的[contenthash]作为文件名哈希位：

// rollup.config.js 输出配置
export default {
  // 其他全局配置保持不变
  output: {
    entryFileNames: 'static/[name].[contenthash].js',
    chunkFileNames: 'static/[name].[contenthash].js',
    assetFileNames: 'static/[name].[contenthash][extname]',
    // 若使用sourcemap，保持与文件哈希规则一致
    sourcemap: true,
  }
}

2. 固定Svelte编译输出 #

关闭Svelte开发模式的动态调试标记注入，单独提取CSS避免样式变动影响JS哈希：

import svelte from 'rollup-plugin-svelte';

export default {
  plugins: [
    svelte({
      compilerOptions: {
        // 生产环境强制关闭dev模式
        dev: process.env.NODE_ENV !== 'production',
        // 固定编译目标，不要动态切换
        generate: 'dom',
      },
      // 提取CSS到独立文件，避免样式内容内嵌到JS中
      emitCss: true,
    }),
    // 其他插件保持原有顺序
  ]
}

3. 配置压缩插件输出确定性 #

开启压缩插件的确定性输出开关，禁止注入动态内容（如构建时间、随机标记等）：

import { terser } from 'rollup-plugin-terser';

export default {
  plugins: [
    // 其他插件放在terser之前
    terser({
      // 开启确定性压缩，相同输入永远得到相同输出
      deterministic: true,
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
      format: {
        // 移除所有注释，避免动态注释导致哈希变动
        comments: false,
      }
    })
  ]
}

4. 固定代码分割规则（按需配置） #

如果开启了代码分割，手动固定chunk分组规则，避免Rollup自动分片时因模块加载顺序变动导致chunk内容变更：

export default {
  output: {
    // 其他output配置
    manualChunks: (moduleId) => {
      // 第三方依赖单独打包为vendor chunk
      if (moduleId.includes('node_modules')) {
        return 'vendor';
      }
      // 公共组件单独打包为common chunk
      if (moduleId.includes('src/components/')) {
        return 'common';
      }
    }
  }
}

验证方法 #

连续执行两次生产构建命令rollup -c --environment NODE_ENV:production，对比两次构建的产物文件名，未修改文件的哈希值应完全一致。

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