来试试手动分包吧

众所周知, 使用vite打包项目之后, 大部分js和css文件都会有一个指纹, 当js或者css改变时这个指纹就会改变. 当我们的一个组件导入一个第三方库时, 打包时会把第三方库和这个组件一起打包. 这会出现什么问题呢, 就是我们的组件有任何的变化, 打包后的指纹就会改变. 一旦发生改变, 那HTTP或者sw缓存就失效了, 需要重新下载这个文件.

如果第三方库比较小还没什么所谓, 但是很大的话比如Markdown, Katex之类的, 几百KB就很大了. 为了几行代码的改动居然付出了这么多, 这是不值得的. 这时候就可以手动分包了.

在vite中可以配置rollupOptions, 不过之后换成rolldown又得配置一下了.

import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {

        },
      },
    },
  },
})

这个manualChunks可以是一个对象, 也可以是一个函数. 是对象的时候只需要写包名以及这个包要导入什么了. 比如

import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
            markdown: ['markdown-it', 'markdown-it-katex', 'prismjs', 'dompurify'],
        },
      },
    },
  },
})

这样markdown相关的东西就从原本的MarkdownContainer-xxx.js里分到了markdown-xxx.js了. 之后MarkdownContainer.vue的任何改动都不会导致markdown-xxx.js的改变, 除非哪天要更新相关的库.

使用函数的话, 这个函数有一个参数, 是文件的绝对路径. 如果确定之后很少引入新的第三方库或者第三方库不再更新之类的, 可以很干脆地把所有第三方库都放到一起.

import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
            if (id.includes('node_modules') || id.endWith('.js') || id.endWith('.ts')) {
                return 'vendor'
            }
        },
      },
    },
  },
})

当然也可以根据自己的需求分包. 想怎么分就怎么分. 反正最后返回一个字符串就可以了.

来试试手动分包吧 ​

来试试手动分包吧