vite 构建产物分块策略

产物分块的好处

构建产物分块,可减少单个 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'],
        },
      },
    },
  },
})
本文收录于专栏
一些博客建设的记录