Laravel Mix 6 dynamic import不生效 所有代码打包进单一JS文件排查

问题原因及对应解决方案 #

• 1. 动态导入路径缺少明确后缀，webpack无法静态识别模块
  你当前的导入写法只写了路径前缀，没有指定文件后缀，webpack编译阶段无法准确匹配对应模块，会直接合并到主包。修改导入语句明确指定文件后缀即可（以.vue为例，根据你的实际文件类型调整）：

component: () => import(/* webpackChunkName: "[request]" */`../pages/${view}.vue`)

• 2. 重复配置babel动态导入插件导致语法被转译失效
  Laravel Mix 6 内置已经支持动态导入语法，你额外配置的@babel/plugin-syntax-dynamic-import会将动态导入语法提前转译为同步require语句，失去拆分效果。直接删除webpack.mix.js中的.babelConfig()配置段即可。

• 3. 未明确配置webpack异步chunk拆分规则
  Laravel Mix 默认的splitChunks规则可能将异步模块合并到主包，需要在webpackConfig中补充异步chunk拆分配置：

.webpackConfig({
    output: {
        chunkFilename: chunkName,
        publicPath: '/',
    },
    // 新增以下配置
    optimization: {
        splitChunks: {
            chunks: 'async',
            minSize: 10240, // 超过10kb的异步chunk才单独拆分，可自行调整
        }
    }
})

• 4. 路由参数view为完全动态值
  如果调用route函数时传入的view参数是运行时动态生成的（比如从后端接口获取、通过变量拼接生成），webpack在编译阶段无法确定需要打包的模块，也不会生成独立chunk。需要确保所有view参数都是编译阶段可确定的硬编码字符串。

调整后重新打包即可生成对应的chunks文件。

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