Laravel Mix中vendor.js压缩与死代码消除问题求助

核心问题分析 #

你的vendor.js体积超标，主要原因：

• mix.extract()默认会把所有第三方依赖打包进vendor，未按需拆分
• Vuetify可能未真正开启按需加载（tree shaking）
• 生产环境webpack优化配置不全，死代码消除未生效
• 可能引入了不必要的polyfill或未优化的第三方依赖

具体解决方案 #

1. 优化mix.extract()，按需拆分依赖

默认的mix.extract()会把所有node_modules中的依赖塞进同一个vendor文件，改为手动指定核心依赖提取，让其他第三方依赖随组件chunk拆分：

// 只提取最核心的基础依赖，如vue、polyfill等
mix.extract(['vue', 'core-js', 'regenerator-runtime']);

2. 确保Vuetify真正按需加载

检查你的Vuetify插件配置文件（如resources/js/plugins/vuetify.js），必须导入vuetify/lib/framework而非完整的vuetify，配合vuetify-loader实现tree shaking：

import Vue from 'vue';
// 关键：导入轻量化的框架版本
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  // 你的Vuetify配置
});

3. 开启webpack死代码消除（Tree Shaking）

在webpack配置中明确开启tree shaking相关选项，生产环境下强制生效：

.webpackConfig({
  mode: mix.inProduction() ? 'production' : 'development',
  optimization: {
    usedExports: true, // 标记未使用的代码
    sideEffects: false, // 告知webpack无副作用的模块可安全删除
    splitChunks: {
      chunks: 'all', // 拆分所有同步/异步chunk
      cacheGroups: {
        // 拆分Vuetify到单独chunk
        vuetify: {
          test: /[\\/]node_modules[\\/]vuetify[\\/]/,
          name: 'vuetify',
          chunks: 'all',
          priority: 20
        },
        // 拆分moment到单独chunk
        moment: {
          test: /[\\/]node_modules[\\/]moment[\\/]/,
          name: 'moment',
          chunks: 'all',
          priority: 10
        }
      }
    }
  },
  // 其他配置...
})

同时在package.json中添加sideEffects字段，避免webpack误删有副作用的文件：

"sideEffects": [
  "*.vue",
  "*.scss",
  "*.css"
]

4. 移除不必要的polyfill

NodePolyfillPlugin会引入大量Node.js环境的polyfill，如果你的项目仅在浏览器环境运行，直接注释掉该插件；若仅需部分polyfill，改为按需导入：

// 在入口文件（如app.js）中按需引入
import 'core-js/stable';
import 'regenerator-runtime/runtime';

5. 生产环境额外优化

• 确认Laravel Mix在生产环境自动开启了代码压缩（mix.inProduction()时默认开启）
• 在服务器端配置Gzip/Brotli压缩（如Nginx），进一步减少传输体积

调整后的完整mix.js示例 #

const mix = require('laravel-mix');
const webpack = require('webpack');

mix.js('resources/js/admin.js', 'public/js')
    .js('public/assets/admin/main.js', 'public/js')
    .js('resources/js/app.js', 'public/js')
    .vue()
    .vuetify('vuetify-loader')
    .sass('resources/sass/admin.scss', 'public/css')
    .css('public/assets/css/main.css', 'public/css')
    .webpackConfig({
        mode: mix.inProduction() ? 'production' : 'development',
        output: {
            publicPath: '/',
            chunkFilename: '[name].js?id=[contenthash]',
        },
        optimization: {
            usedExports: true,
            sideEffects: false,
            splitChunks: {
                chunks: 'all',
                cacheGroups: {
                    vendors: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        chunks: 'initial',
                        priority: -10
                    },
                    vuetify: {
                        test: /[\\/]node_modules[\\/]vuetify[\\/]/,
                        name: 'vuetify',
                        chunks: 'all',
                        priority: 20
                    },
                    moment: {
                        test: /[\\/]node_modules[\\/]moment[\\/]/,
                        name: 'moment',
                        chunks: 'all',
                        priority: 10
                    }
                }
            }
        },
        plugins: [
            new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb|el/),
            // 若不需要Node环境polyfill，注释掉下面一行
            // new NodePolyfillPlugin()
        ],
    });

// 手动提取核心依赖
mix.extract(['vue', 'core-js', 'regenerator-runtime']);

if (mix.inProduction()) {
    mix.version();
}

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