Laravel Inertia项目打包后app.js线上体积过大加载慢求助

1. 确认构建命令与环境变量配置 #

• 检查线上部署脚本的打包命令，必须执行 npm run prod 或 npm run production，如果误执行npm run dev/npm run watch等开发环境命令，打包产物不会执行压缩、Tree Shaking等优化逻辑，体积是生产环境的3-4倍属于正常情况。
• 确认线上构建时NODE_ENV环境变量值为production，Laravel Mix仅在该环境变量下自动启用所有生产环境优化项，可手动指定环境变量执行构建：NODE_ENV=production npm run prod
• 如果采用本地打包后上传产物的部署模式，确认部署流程中没有重新执行开发环境打包命令覆盖本地已压缩的产物。

2. 实现代码分割拆分单文件体积 #

你当前使用同步require加载所有页面，会把resources/js/Pages目录下全部Vue页面文件打包到单一app.js内，页面数量越多整体体积越大，改成异步动态导入即可自动拆分代码，仅在访问对应页面时加载对应chunk：
修改app.js中的resolveComponent逻辑如下：

resolveComponent: (name) => import(`./Pages/${name}`).then(module => module.default),

3. 统一依赖安装规则 #

• 线上安装依赖执行npm ci --only=production，避免安装不必要的开发依赖被打包进产物。
• 确保本地和线上的package.json、package-lock.json/yarn.lock文件完全一致，避免依赖版本差异导致的体积异常。

4. 开启服务器传输压缩 #

如果确认本地和线上的源文件体积一致，仅线上传输体积偏大，需要在Nginx/Apache等Web服务端开启gzip或Brotli压缩，通常可将JS文件的传输体积压缩到原大小的1/4-1/3。

5. 可视化体积分析（可选） #

可以引入打包分析工具直观定位大体积依赖：

1. 安装分析依赖：npm install webpack-bundle-analyzer --save-dev
2. 在webpack.mix.js中添加配置：

mix.bundleAnalyzer();

执行打包后即可看到可视化的包体积占比报告，可针对性替换大体积依赖、剔除无用逻辑。

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