本文最后更新于 2024-11-27,文章内容可能已经过时。

vite 中,打包时默认将打包结果合并成一个index.js文件,当业务代码发生改变时,重新打包后,会将业务除外的一些第三方资源进行重新打包整合,其实在打包时只需关注有变化的文件重新打包即可,则其它第三方资源,第一次打包后进行缓存不需要在进行下次打包结果!

通过vite 打包配置,将业务代码第三方资源库进行拆包,在改动业务代码时,只有业务代码部分会重新打包下载则其它资源缓存即可!

export default defineConfig({
  build: {
    rollupOptions: {
      // 手工分包配置
      manunlChunks: {
       // vender 可以随便写,就是打包结果后,将第三方库整合到一个文件的文件名!
       // vender.hashname.js
       "vender": ["lodash", "vue"]
      }
    }
  }
})

manunlChunks 可以是一个函数,可以根据回调参数,来判断哪些模块需要拆包!

export default defineConfig({
  build: {
    rollupOptions: {
      // 手工分包配置
      manunlChunks(id){
        // id 是每一个模块的路径,根据路径来获取哪些模块是node_module下的第三方资源
        if(id.includes("node_modules")){
          // 将第三方库打包成一个vender文件 !
          return "vender";
        }
      }
    }
  }
})