Parcel生产环境使用dynamic import时无法解析bundle如何解决

问题表现 #

• 本地localhost启动服务测试Parcel构建产物时功能全部正常，部署到生产环境后动态导入逻辑失效
• 触发异常的业务代码：

if (condition) {
  await import('./components/modify_root.js');
} else {
  await import('./components/index_root.js');
}

• 报错位置指向打包产物app.js中对应上述代码的第二行
• 项目技术栈：PreactJS前端框架 + node-sass CSS预处理工具

核心原因 #

90%以上的同类问题都是静态资源公共路径(publicPath/publicUrl)配置错误：本地开发时Parcel默认以当前服务根路径为基准加载chunk文件，一旦生产环境静态资源部署在子目录、或者服务器路径映射规则和本地不一致，动态import拉取拆分出来的chunk文件时就会请求错误路径，返回404导致导入失败。

修复方案 #

• 优先用相对路径配置，兼容所有部署场景：
  如果使用Parcel 2.x版本，在项目根目录package.json中添加如下配置：

  {
    "targets": {
      "default": {
        "publicUrl": "./"
      }
    }
  }
  

  如果使用Parcel 1.x版本，直接在build命令中追加参数即可：

  {
    "scripts": {
      "build": "parcel build index.html --public-url ./"
    }
  }
  

  配置为./后，所有动态chunk都会以当前入口js的所在路径为基准拉取，不管部署在站点根目录还是多级子目录，都不会出现路径错配问题。

• 其他排查项：

  • 检查生产环境服务器的MIME类型配置，.js后缀文件需要返回application/javascript类型，否则chunk加载后浏览器无法解析执行，同样会触发导入报错
  • 检查服务器缓存规则：入口html文件设置为不缓存，带hash值的静态chunk文件设置长期缓存，避免上线后旧版入口js缓存未更新，拉取已被删除的旧版本chunk导致404
  • 检查部署文件完整性：动态导入的组件会被Parcel拆分为独立的chunk文件，部署时需要把dist目录下所有生成的文件全量上传，不要只上传入口app.js文件

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