vue2.x中Webpack构建慢问题

现在我们系统中在 Vue 2.x 中，Webpack 是默认的构建工具.目前vue.config.js 配置文件就是用于定制 Webpack 构建流程的,但是之前配置打包完成之后会在js文件夹中有很多文件,访问前端登陆时候会全部加载js文件中的文件(为什么我也不懂),下面修改过的配置打包完成之后js文件中的文件只有几个,并且由原来的200MB减少到了40多MB. Vue 3.x 仍然可以使用 Webpack，Vue 3.x 官方更推荐另一种构建工具——Vite,下述配置如果使用Vite应该是不适用

const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const timeStamp = new Date().getTime()

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  productionSourceMap: false, // 生产环境不生成 source map，以提高构建速度
  lintOnSave: false,

  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境移除 console.log
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;

      // 使用 Webpack Bundle Analyzer 插件分析打包体积
      config.plugins.push(new BundleAnalyzerPlugin());

      // 配置持久化缓存
      config.output.filename = 'js/[name].[contenthash]'+timeStamp+'.js';
      config.output.chunkFilename = 'js/[name].[contenthash]'+timeStamp+'.js';
    }

    // 设置 Source Map（开发模式下开启，生产环境关闭）
    //config.devtool = process.env.NODE_ENV === 'development' ? 'source-map' : false;
  },

  chainWebpack: config => {
    // 别名配置
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@layout', resolve('src/layout'))
      .set('@static', resolve('src/static'))
      .set('@mobile', resolve('src/modules/mobile'));

    // 配置代码分割
    config.optimization
      .splitChunks({
        chunks: 'all',
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
            priority: -10
          },
          common: {
            name: 'common',
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      });

    // 生产环境下开启 js\css 压缩
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        test: /\.js$|\.css$/,
        threshold: 10240, // 对超过10k的数据进行压缩
        deleteOriginalAssets: false // 不删除源文件
      }));
    }

    // 配置 markdown 文件处理
    config.module
      .rule('markdown')
      .test(/\.md$/)
      .use('file-loader')
      .loader('file-loader')
      .end();
  },

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1890FF',
          'link-color': '#1890FF',
          'border-radius-base': '4px'
        },
        javascriptEnabled: true
      }
    }
  },

  devServer: {
    port: 1818,
    proxy: {
      '/boot': {
        target: 'http://localhost:8080',
        ws: false,
        changeOrigin: true
      }
    }
  }
};

1. 代码分割：

   • 使用 splitChunks 进行代码分割，将 node_modules 中的依赖和共享模块分开，这样可以减小每次加载的 JavaScript 文件的体积。

2. 持久化缓存：

   • 使用 [contenthash] 作为文件名的一部分，这样只有在文件内容发生变化时，浏览器才会重新下载新的文件。

3. Source Map 设置：

   • 只在开发环境中生成 Source Map，生产环境下禁用它以减少构建时间和文件大小。

4. Bundle Analyzer 插件：

   • 添加 BundleAnalyzerPlugin 插件，用于分析打包结果，帮助你了解和优化代码体积。

5. 压缩插件：

   • CompressionPlugin 配置在生产环境下启用，压缩 JavaScript 和 CSS 文件以减少文件体积。

6. CSS 处理：

   • 配置 LESS 变量以自定义样式