产物分块的好处

构建产物分块，可减少单个 js 的体积，防止依赖重复打包，增加整体网页静态资源的加载速度。

另外往往可把 node_modules 内的三方库单独拆分为一个或多个 chunks ，因为它们不常改变，最终 hash 不变，可更有效利用浏览器缓存。

而常变的业务代码拆分后体积都很小，前端发版后只有这些业务代码缓存失效，可请求更少的内容。

splitVendorChunkPlugin

可引用 splitVendorChunkPlugin 插件来启用 vite 的默认分块策略，即类似于 vue-cli 默认的策略，将 node_modules 内的库打到 vendor 中。

import { splitVendorChunkPlugin } from 'vite'
export default defineConfig({
  plugins: [splitVendorChunkPlugin()]
})

定义 manualChunks

可通过 build.rollupOptions.output.manualChunks 配置分割策略，使用方式安装 rollup 文档： https://rollupjs.org/configuration-options/#output-manualchunks

如将 antd 相关的依赖单独打包为 chunks：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'antd-libs': ['antd', '@ant-design/pro-components'],
        },
      },
    },
  },
})