解决Vue项目打包后文件过大问题（项目引入新文件导致打包体积激增）

解决思路：
1.首先排查打包文件中哪部分所占体积增大
2.对相应的文件进行处理

1.排查：

安装vue打包可视化工具

npm install --save-dev webpack-bundle-analyzer

在vue.config.js中配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    configureWebpack: {
        plugins: [
          new BundleAnalyzerPlugin({
            analyzerMode: 'server', // 使用服务器模式启动分析器
            analyzerHost: '127.0.0.1',
            analyzerPort: 8088,
            openAnalyzer: true, // 自动打开浏览器
          })
        ],
      },
};

在执行npm run dev 或 npm run build命令，生成分析报告，并自动打开浏览器，如下图

在分析报告中查看哪部分打包过大，并对相应的文件进行处理
（我的问题是组件vue-office重复打包至多个js文件，导致打包出来的文件大小激增）

2.描述一下我的问题，及解决方案

场景：
在vue项目中引入自定义组件A（即使该组件内容为空）会导致原本只在一个chunk中存在的vue-office相关模块被打包到多个chunk中，使得打包体积增加20M，而当移除对组件A的引入后，打包体积恢复正常
分析：
组件A的引入改变了webpack的代码分割行为，导致vue-office被重复打包
解决方案：
方法1.vue-office的文件引入（import）改成全局引入
方法2.在vue.config.js中配置将vue-office强制打包到一个文件中

module.exports = {
    configureWebpack: {
        optimization: {
          splitChunks: {
            cacheGroups: {
              vueOffice: {
                test: /[\\/]node_modules[\\/]@vue-office[\\/]/,
                name: 'vue-office-bundle',
                chunks: 'all',
                priority: 100,
                enforce: true,
                reuseExistingChunk: true
              }
            }
          }
        },
        resolve: {
          alias: {
            // 确保所有引用使用相同路径
            '@vue-office/pdf': path.resolve(__dirname, 'node_modules/@vue-office/pdf'),
            '@vue-office/excel': path.resolve(__dirname, 'node_modules/@vue-office/excel'),
            '@vue-office/docx': path.resolve(__dirname, 'node_modules/@vue-office/docx')
          }
        }
      },
};