为什么vendor CSS chunk仅在生产环境构建，开发环境不生成？

问题1：本地构建与Netlify构建产物不一致 #

• 首先对齐构建环境变量：执行NODE_ENV=production yarn build（Windows环境执行set NODE_ENV=production && yarn build），确认本地生产模式构建后的dist目录下html文件是否存在vendors chunk的preload标签。vue-cli默认仅在生产模式下为初始chunk生成preload标签，若本地未显式指定生产模式，可能触发开发模式构建逻辑，导致产物差异。
• 对齐依赖版本：确保你已经将yarn.lock提交到代码仓库，Netlify会根据lock文件安装完全一致的依赖版本，避免因依赖版本差导致的构建逻辑差异。
• 检查preload插件配置：确认vue.config.js中是否存在针对preload插件的环境判断逻辑，比如仅在本地构建时删除preload插件的配置。

问题2：vendors chunk打包所有入口的vendor样式 #

你没配置splitChunks的情况下，vue-cli默认的拆包逻辑会将所有入口引用的node_modules下的样式统一打包到全局chunk-vendors.css中，你可以通过自定义拆包配置实现按入口拆分vendor资源：

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          // 覆盖默认的vendors拆包规则
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            // 按入口名生成对应的vendors chunk
            name(module, chunks, cacheGroupKey) {
              const entryName = chunks[0].name;
              return `${cacheGroupKey}-${entryName}`;
            },
            priority: -10,
            reuseExistingChunk: true
          },
          // 可选：多入口共用的资源提取为common chunk，减少重复打包
          common: {
            name: 'common',
            minChunks: 2,
            chunks: 'initial',
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

配置完成后重新构建，每个入口都会生成独立的chunk-vendors-[入口名].css，仅包含当前入口用到的vendor样式。

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