为什么每次运行npm run dev后不改代码app.js体积仍持续增大？

1. 优先排查sourcemap内嵌问题 #

Laravel Mix dev模式默认使用inline类sourcemap配置，会把sourcemap内容直接写入app.js，若缓存写入异常会出现sourcemap重复追加的情况，是最常见的体积持续上涨原因。
修改配置将sourcemap外置：
在webpack.mix.js中添加：

mix.sourceMaps(false, 'source-map')

或者在webpack.config.js中添加配置项：

module.exports = {
  // 原有配置保留
  devtool: 'cheap-module-source-map'
}

改完后重新运行npm run dev两次，确认体积是否稳定。

2. 修正Inertia页面引入方式 #

你当前使用同步require加载所有Page目录下的vue文件，会导致全量打包所有页面代码，不仅初始体积大，也可能触发增量打包的缓存重复问题。
替换为Inertia官方推荐的异步import写法，支持代码分割：
修改resources/js/app.js中的resolve配置：

resolve: (name) => import(`./Pages/${name}.vue`),

3. 修复vue-loader缓存异常 #

你使用的laravel-mix 6.0.x初始版本和vue-loader@16存在已知的dev模式缓存兼容问题，增量打包时不会清除旧的vue模块缓存，导致代码重复追加。
解决方法：

• 升级laravel-mix到最新的6.x稳定版本：npm install laravel-mix@latest --save-dev
• 或者在dev命令中添加禁用缓存参数，修改package.json的scripts：

"development": "mix --disable-cache"

• 每次运行dev前手动清理缓存：删除public/js、public/css目录和node_modules/.cache目录

4. 限制静态资源base64转码大小 #

如果你的vue文件中引入了大量小体积静态资源，默认配置会全部转成base64写入js，增量打包时可能重复写入。
在webpack.mix.js中添加资源大小限制配置：

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 仅小于8KB的资源才转base64
          }
        }
      }
    ]
  }
})

注意：.vue()配置项是Laravel Mix用来注册vue-loader处理单文件vue的必要配置，不能移除，移除后无法解析vue文件是正常现象。

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