为何Parcel未将多模块及CSS打包为单个文件？

方案一：给build命令添加禁用代码拆分参数 #

Parcel 2默认会自动拆分代码（比如提取公共依赖、拆分按需加载模块），要强制打包成单个文件，直接在build命令里加--no-split参数即可：

修改package.json里的scripts字段：

"scripts": {
  "start": "parcel src/index.html",
  "build": "parcel build src/index.html --dist-dir ./www --no-split"
}

重新执行npm run build，www目录里就会生成单个JS文件和对应的CSS文件（若项目有CSS，Parcel也会将其打包为单个文件）。

方案二：通过targets字段配置打包规则 #

如果命令行参数不够灵活，也可以在package.json的targets里明确配置输出规则：

替换原有的targets内容为：

"targets": {
  "main": {
    "source": "src/index.html",
    "distDir": "./www",
    "noSplit": true
  }
}

然后把build脚本简化成：

"scripts": {
  "start": "parcel src/index.html",
  "build": "parcel build"
}

这种方式更适配复杂项目的打包配置需求。

注意事项 #

• 强制打包成单个文件会让最终文件体积变大，可能影响页面加载速度——毕竟Parcel默认的代码拆分是为了优化性能，按需加载的模块无需一开始就全部加载。
• 如果项目里用了import()动态导入语法，即使加了--no-split，Parcel还是会把动态导入的部分拆成单独文件，这种情况要么改成静态import，要么单独处理这部分代码。

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