为什么vue-cli-service build生成多个login文件而非合并到app chunk？

1、多login相关chunk生成原因及解决方案 #

产生原因 #

• 首先是路由懒加载配置：vue-cli默认支持webpack的代码分割能力，如果你路由配置中对login相关页面使用了() => import('xxx')的异步导入语法，每一个异步导入的模块都会被独立拆分为单独的chunk，生成单独的js/css文件。
• 其次是旧构建文件未清理：你当前配置没有开启构建前自动清空输出目录的逻辑，每次执行npm run build新生成的带哈希后缀的文件会直接追加到dist目录，多次修改login相关代码后就会累积多个不同哈希版本的login开头文件。
• 额外注意：vue-cli项目中根目录的webpack.config.js不会被加载生效，所有webpack相关配置都需要写在vue.config.js中，你可以直接删除这个冗余文件。

解决配置 #

第一步：开启构建自动清理输出目录

修改vue.config.js，新增如下配置：

module.exports = {
  publicPath: "/myapp",
  outputDir: "../dist",
  // 新增配置：开启生产环境sourcemap（第二个问题也会用到）
  productionSourceMap: true,
  devServer: {
    host: "localhost"
  },
  configureWebpack: {
    devtool: 'source-map',
    output: {
      // 每次构建前自动清空输出目录
      clean: true
    },
    // 新增：合并login相关chunk到app的配置
    optimization: {
      splitChunks: {
        cacheGroups: {
          loginChunk: {
            test: /[\\/]views[\\/]login/i, // 匹配所有login相关的文件路径，根据你的实际目录调整正则规则
            name: 'app', // 合并到app chunk中
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
};

第二步：可选修改路由导入方式

如果你不想修改webpack配置，也可以直接把路由中login相关页面的异步导入改为同步导入，就不会生成单独chunk：

// 原来的懒加载写法（会拆分为单独chunk）
// component: () => import('@/views/Login3.vue')
// 改为同步导入写法
import Login3 from '@/views/Login3.vue'
// 路由配置中直接引用即可
component: Login3

2、生产环境代码可调试配置 #

要让生产环境构建的代码保持可读可调试，调整以下两项配置即可：

2.1 配置正确的sourcemap规则 #

上面已经在vue.config.js中添加了productionSourceMap: true和devtool: 'source-map'，该配置会生成完整的源码映射文件，浏览器打开控制台后会自动加载对应的.map文件，可直接断点调试和查看原始源码。

2.2 可选关闭代码混淆（需要更高可读性时使用） #

如果需要完全不压缩混淆代码，保留原始变量名、函数名和代码结构，可以在configureWebpack中添加压缩工具配置：

// 先安装terser-webpack-plugin依赖：npm i terser-webpack-plugin -D
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  // ...其他原有配置
  configureWebpack: {
    devtool: 'source-map',
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: false, // 关闭代码压缩
            mangle: false, // 关闭变量名混淆
            format: {
              comments: false // 可根据需求选择是否保留注释
            }
          }
        })
      ],
      // ...前面的splitChunks配置
    }
  }
}

注意：关闭压缩和配置source-map会暴露项目源码，同时会增大构建产物的体积，仅建议在内网部署的业务系统中使用，公网对外服务的项目请谨慎配置。

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