vue config 优化打包配置 configureWebpack 分片打包，文件添加hash

Vue CLI 中的 `vue.config.js` 文件是用来配置构建过程的，其中包括对 webpack 的配置优化。`configureWebpack` 配置选项允许开发者直接修改 webpack 配置对象，以便定制化打包行为。分片打包，也称为代码分割或按需加载，是一种将应用拆分成多个小模块的技术，每个模块只包含必要的代码，可以提高首屏加载速度。

在 `configureWebpack` 中，你可以通过 `optimization.splitChunks` 对象来进行分片打包配置。比如：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all', // 或者 'async'
        name: 'common', // 根据需要设置chunk名称
        cacheGroups: { // 定义分片规则
          vendor: { // 区分公共依赖和业务代码
            test: /[\\/]node_modules[\\/]/,
            priority: -10, // 先提取公共依赖
            filename: 'vendor.[contenthash].js',
            minChunks: 2, // 至少两个模块共享这个chunk才提取
          },
          common: { // 提取公共部分
            minChunks: 3, // 至少三个模块共享
            filename: 'common.[contenthash].js',
          },
        },
      },
    },
  },
};

这里设置了 `filename` 属性加上内容哈希值 `[contenthash]`，每次构建都会生成新的哈希名，这有助于减少缓存污染并保持资源的URL相对稳定。