执行npx mix --production为何在js/app目录生成大量数字命名JS文件？

这些文件是什么？ #

这些数字命名的JS文件是webpack（Laravel Mix基于webpack实现）的**自动代码分割（Code Splitting）**产物。由于你配置了多个JS入口文件（app.js、prism.js、validation.js等），webpack会自动检测这些入口之间共享的公共依赖（比如第三方库、重复的工具函数等），将其抽离为独立的chunk文件，用随机数字命名。这么做的目的是优化缓存和加载性能——用户访问页面时，公共代码只需加载一次，后续访问其他依赖相同代码的页面时可以直接复用缓存。

如何避免生成这类文件？ #

根据需求，有两种处理方案：

方案1：完全禁用自动代码分割 #

如果不需要webpack自动拆分公共依赖，可在webpack.mix.js中添加webpack配置，关闭splitChunks功能：

// Javascript
const javascriptInputsToCompile = [
    'app.js',
    'libs/prism.js',
    // ...其他入口文件
    'utils/validation.js',
];
javascriptInputsToCompile.forEach((file) => {
    mix.js(`resources/assets/js/${file}`, `js/${file}`);
});

// 添加以下配置禁用代码分割
mix.webpackConfig({
    optimization: {
        splitChunks: {
            enabled: false
        }
    }
});

方案2：自定义公共chunk的命名（保留代码分割但不用数字命名） #

如果想保留代码分割的性能优化，只是不想用随机数字命名，可配置splitChunks指定固定名称：

// Javascript
const javascriptInputsToCompile = [
    'app.js',
    'libs/prism.js',
    // ...其他入口文件
    'utils/validation.js',
];
javascriptInputsToCompile.forEach((file) => {
    mix.js(`resources/assets/js/${file}`, `js/${file}`);
});

// 配置公共chunk的固定名称
mix.webpackConfig({
    optimization: {
        splitChunks: {
            chunks: 'all',
            name: 'js/app/common' // 指定公共chunk的输出路径和名称
        }
    }
});

配置后，所有公共依赖会被打包到js/app/common.js，替代原来的一堆数字命名文件。

内容的提问来源于stack exchange，提问作者Young L.