Parcel中能否使用带插值字符串的动态import？配置咨询

核心说明 #

Parcel支持React.lazy配合动态导入实现按需加载，但你当前用的import(./${page})属于完全动态的路径写法，Parcel没法静态分析出具体要导入的模块，所以不会做代码拆分，运行时会把这个路径当成静态资源去请求，自然就拿到了服务器默认返回的index.html，构建后也只会生成一个js文件。

具体修复方案 #

• 限定路径范围（推荐）
  给动态导入加固定的路径前缀和文件后缀，让Parcel能静态推断出可能的模块集合，比如所有页面都放在./pages目录下：

  // page传的是不带路径和后缀的文件名，比如'SomePage'
  const Page = React.lazy(() => import(`./pages/${page}.jsx`));
  

  这样Parcel会把./pages/下所有符合.jsx后缀的文件都作为可拆分模块，构建时生成对应的chunk，运行时也能正确加载。

• 静态枚举页面
  如果页面数量不多，直接把所有可能的页面映射成静态对象，避免动态路径：

  const pageImports = {
    SomePage: () => import('./SomePage'),
    OtherPage: () => import('./OtherPage')
  };
  const Page = React.lazy(pageImports[page]);
  

  这种写法最稳妥，Parcel能明确识别每个需要拆分的模块，不会有路径解析问题。

差异原因 #

Webpack对动态导入的静态分析规则更宽松，只要模板字符串有固定前缀就能识别；但Parcel的分析更严格，必须有明确的路径前缀和可预测的文件名模式，否则会把动态导入当成运行时资源请求，而不是模块导入。

验证方式 #

修改后重新构建，看输出目录里是否生成了多个带哈希的js chunk文件，如果有就说明代码拆分成功，运行时也不会再出现请求/SomePage的错误了。

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