React+Parcel代码分割失效，如何解决动态导入变量的编译问题？

问题背景 #

使用Parcel配合React.lazy实现代码分割时，浏览器抛出以下错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

2src.7ed060e2.js:1362 Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:1234/Pages/Home/index.js

项目依赖及脚本配置如下：

"dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "parcel-bundler": "^1.12.5",
    "react": "^16.9.0 || ^17.0.0 || ^18",
    "react-dom": "^18.2.0",
     ...
  },
  "scripts": {
    "start": "parcel public/index.html",
    "build": "parcel build public/index.html",
  }

经排查，报错原因是动态导入路径使用了运行时生成的变量variableCompoentName，导致Parcel无法提前识别并编译对应模块。

解决方法 #

Parcel的代码分割依赖静态编译分析，必须在编译阶段明确识别出需要打包的模块范围，针对动态导入路径的问题，可通过以下方式解决：

1. 固定路径前缀，仅保留变量后缀 #

将导入路径的静态部分写死，只让变量作为路径的最后一段，这样Parcel会自动扫描匹配前缀的所有模块并打包：

// 错误示例：全动态路径
// const Component = React.lazy(() => import(`${variableCompoentName}`))

// 正确示例：固定前缀 + 变量后缀
const Component = React.lazy(() => import(`./Pages/${variableCompoentName}/index.js`))
// Parcel会编译`./Pages/`目录下所有符合`[模块名]/index.js`结构的文件

2. 显式枚举所有可能的模块 #

如果项目中需要动态导入的模块数量较少，直接通过条件判断枚举所有可能的导入项，让Parcel明确知晓要打包的模块：

const loadComponent = (componentName) => {
  switch(componentName) {
    case 'Home':
      return import('./Pages/Home/index.js');
    case 'About':
      return import('./Pages/About/index.js');
    case 'Profile':
      return import('./Pages/Profile/index.js');
    default:
      throw new Error(`不存在的模块：${componentName}`);
  }
};

const Component = React.lazy(() => loadComponent(variableCompoentName));

3. 强制指定需打包的模块范围 #

如果上述方法不适用，可在Parcel配置中显式指定需要包含的模块路径，确保这些文件被编译：
在项目根目录的package.json中添加parcel配置字段：

{
  "parcel": {
    "include": [
      "./src/Pages/**/*.js"
    ]
  }
}

或者创建.parcelrc文件配置相同规则，Parcel会将指定路径下的所有模块纳入打包范围。

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