// 修改vue.config.js 分离不常用代码库

在Vue.js项目中，如果你想要分离一些不常用的第三方依赖或代码库，可以修改`vue.config.js`文件来配置模块拆分（chunking）。这样做的好处是可以优化打包后的体积，提高加载速度，特别是对于那些在大部分页面中不需要使用的库。

以下是一些步骤：

1. **打开 `vue.config.js`**：这个文件通常位于项目的根目录下，它是Vue CLI自动生成的一个配置文件，用于定制构建过程。

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: { // 配置拆分规则
        chunks: 'all', // 或者选择只拆分大的代码块，如：async
        minSize: 10000, // 超过此大小的代码会被拆分
        cacheGroups: { // 创建自定义的拆分规则组
          common: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors', // 拆分后的文件名
            priority: -10, // 设置优先级，数值越低优先级越高
            chunks: 'initial' // 只包含初始加载的部分
          }
        }
      }
    }
  }
};

2. **配置缓存组**：上面的示例中，我们创建了一个名为`common`的缓存组，它会将所有来自`node_modules`下的库拆分成一个单独的`vendors` chunk，这有助于减少首屏加载时间。

3. **调整`cacheGroups`**：你可以根据实际需求调整每个缓存组的条件，例如最小大小、是否包含懒加载（lazy）等。

4. **运行构建**：保存配置后，通过命令行运行`npm run build`或`yarn build`，新的拆分配置就会应用到构建过程中。