如何通过parcel-namer-hashless移除Parcel中index.js与index.runtime.js的哈希

问题3：Parcel给runtime文件加哈希的原因 #

Parcel自动生成的runtime bundle负责处理模块加载、代码分割的初始化逻辑，默认被归类为动态生成的chunk。Parcel给这类文件加哈希的核心目的是缓存优化：当项目依赖、打包配置或runtime逻辑变化时，哈希值会更新，避免浏览器加载旧的缓存文件。但如果你的场景需要固定文件名（比如部署时的静态资源路径固定），完全可以覆盖这个默认行为。

问题1&2：移除index.runtime.js哈希的解决方案 #

方案1：调整parcel-namer-hashless配置

你当前的插件配置未正确覆盖runtime文件的命名规则，需修改两处：

1. 更新.parcelrc的namers优先级：确保插件优先处理，同时保留默认namer兜底

{
  "extends": "@parcel/config-default",
  "resolvers": [
    "parcel-resolver-ignore",
    "..."
  ],
  "namers": [
    "parcel-namer-hashless",
    "..."
  ]
}

2. 在package.json中强化匹配规则：明确指定runtime文件，并开启强制模式

"parcel-namer-hashless": {
  "include": [
    ".js$",
    ".ico$",
    "index.runtime.js$"
  ],
  "force": true
}

修改后执行npm run clean && npm run build，确保缓存完全清除。

方案2：修复自定义Namer逻辑

你之前的自定义namer误判了runtime bundle的特征（它没有对应的原始index路径的entryAsset），应通过bundle.isRuntime属性识别：

const { Namer } = require('@parcel/plugin');

module.exports = new Namer({
  async name({ bundle }) {
    // 识别并命名自动生成的runtime bundle
    if (bundle.type === 'js' && bundle.isRuntime && !bundle.isInline) {
      return 'index.runtime.js';
    }

    // 处理普通入口文件，保留原文件名
    const entryAsset = bundle.getMainEntry();
    if (entryAsset) {
      const fullFileName = entryAsset.filePath.split('/').pop();
      return fullFileName;
    }

    // 其他chunk的兜底命名
    const id = bundle.id.slice(0, 8);
    return `bundle-${id}.${bundle.type}`;
  }
});

然后在.parcelrc中指定自定义namer：

{
  "extends": "@parcel/config-default",
  "resolvers": [
    "parcel-resolver-ignore",
    "..."
  ],
  "namers": [
    "./custom-namer.js",
    "..."
  ]
}

方案3：禁用Runtime分离（适合无代码分割的项目）

如果你的项目不需要代码分割，可以直接让Parcel把runtime逻辑打包进主入口文件，避免生成单独的runtime bundle：
在package.json中添加Parcel配置：

"parcel": {
  "optimizations": {
    "splitRuntime": false
  }
}

执行构建后，不会再生成index.runtime.js，所有逻辑合并到主JS文件中。

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