Vue2项目打包后chunk数量太多优化

优化方式都是通过修改打包配置实现 vue.config.js

优化方式1：

// 使用splitChunks 精细化主动拆分 / 合并
const path = require('path');

module.exports = {
   productionSourceMap: false,
   devServer: {
      disableHostCheck: true,
      /** 配置代理 解决威哥亿量项目本地运行跨域问题  注意:亿量请求接口时候要使用 http://localhost:8080/yl/setting/third_party_apps 而不能使用8001端口*/
      // const baseURL = "192.168.1.8:8000/";

      // proxy: {
      //    '/yl': {
      //       // target: 'http://zhubo-admin-test.119you.com:8001',
      //       target: 'http://192.168.1.8:8000',
      //       changeOrigin: true,
      //    }
      // }
   },
   chainWebpack: (config) => {
      config.plugin('html').tap((args) => {
         let faviconPath = 'public/favicon.ico'; // 默认的favicon.ico路径

         // 根据命令后的参数来判断使用哪个.ico文件
         if (process.env.npm_lifecycle_event === 'build:zhubo2') {
            // faviconPath = './public/favicon_xyf.ico'; // npm run build:zhubo2 使用favicon_xyf.ico
            faviconPath = path.resolve(__dirname, 'public/favicon_xyf.ico'); // 使用绝对路径来指定 favicon 的路径
         } else {
            faviconPath = path.resolve(__dirname, 'public/favicon.ico'); // 使用绝对路径来指定 favicon 的路径
         }

         args[0].favicon = faviconPath;
         return args;
      });

      // 生产环境下移除console
      if (process.env.NODE_ENV === 'production') {
         config.optimization.minimizer('terser').tap((args) => {
            args[0].terserOptions.compress = {
               ...args[0].terserOptions.compress,
               drop_console: true, // 移除所有console
               drop_debugger: true, // 移除debugger
               // pure_funcs: ['console.log', 'console.info', 'console.warn', 'console.error'] // 指定移除的console方法
               pure_funcs: ['console.log', 'console.info', 'console.warn'] // 指定移除的console方法
            }
            return args;
         })
      }
   },
   configureWebpack: {     // 解决引用公用css  eg:<style src="@commonStyle/selectedList.css" scoped></style>
      resolve: {
         alias: {
            '@commonStyle': path.resolve(__dirname, 'src/commonStyle')
         }
      }
   },
};

优化方式2：

// 使用LimitChunkCountPlugin粗暴的最终兜底限制限制chunk数量
const path = require('path');
const webpack = require('webpack');

module.exports = {
   productionSourceMap: false,
   devServer: {
      disableHostCheck: true,
      /** 配置代理 解决威哥亿量项目本地运行跨域问题  注意:亿量请求接口时候要使用 http://localhost:8080/yl/setting/third_party_apps 而不能使用8001端口*/
      // const baseURL = "192.168.1.8:8000/";

      // proxy: {
      //    '/yl': {
      //       // target: 'http://zhubo-admin-test.119you.com:8001',
      //       target: 'http://192.168.1.8:8000',
      //       changeOrigin: true,
      //    }
      // }
   },
   chainWebpack: (config) => {
      config.plugin('html').tap((args) => {
         let faviconPath = 'public/favicon.ico'; // 默认的favicon.ico路径

         // 根据命令后的参数来判断使用哪个.ico文件
         if (process.env.npm_lifecycle_event === 'build:zhubo2') {
            // faviconPath = './public/favicon_xyf.ico'; // npm run build:zhubo2 使用favicon_xyf.ico
            faviconPath = path.resolve(__dirname, 'public/favicon_xyf.ico'); // 使用绝对路径来指定 favicon 的路径
         } else {
            faviconPath = path.resolve(__dirname, 'public/favicon.ico'); // 使用绝对路径来指定 favicon 的路径
         }

         args[0].favicon = faviconPath;
         return args;
      });

      // 生产环境下移除console
      if (process.env.NODE_ENV === 'production') {
         config.optimization.minimizer('terser').tap((args) => {
            args[0].terserOptions.compress = {
               ...args[0].terserOptions.compress,
               drop_console: true, // 移除所有console
               drop_debugger: true, // 移除debugger
               // pure_funcs: ['console.log', 'console.info', 'console.warn', 'console.error'] // 指定移除的console方法
               pure_funcs: ['console.log', 'console.info', 'console.warn'] // 指定移除的console方法
            }
            return args;
         })
      }
   },
   configureWebpack: {     // 解决引用公用css  eg:<style src="@commonStyle/selectedList.css" scoped></style>
      // 1. 保留原有别名配置
      resolve: {
         alias: {
            '@commonStyle': path.resolve(__dirname, 'src/commonStyle')
         }
      },
      // 2. 设置兜底chunk数量 全局粗暴限制（只看最终数量，不管 chunk 内容 / 归属）
      plugins: [
         new webpack.optimize.LimitChunkCountPlugin({    // 粗暴的最终兜底限制
            maxChunks: 5,     // 强制限制打包后生成的 chunk（代码块）数量最多不超过 5 个
         }),
      ],
   },
};