vite打包優(yōu)化分片打包依賴(lài)包詳解

更新時(shí)間：2024年07月01日 14:15:10 作者：Mr__proto__

這篇文章主要介紹了vite打包優(yōu)化分片打包依賴(lài)包,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vite打包優(yōu)化分片打包依賴(lài)包

在開(kāi)發(fā)Vue3項(xiàng)目時(shí)，我們使用vite進(jìn)行構(gòu)建，由于項(xiàng)目中開(kāi)發(fā)的是地圖大屏項(xiàng)目，依賴(lài)較多

為了提高用戶(hù)體驗(yàn)減少用戶(hù)等待的時(shí)間，對(duì)此進(jìn)行優(yōu)化：

拆分打包的方法

// vite.config.ts

output: {
          // 配置rollup輸出選項(xiàng)
          // Static resource classification and packaging//靜態(tài)資源分類(lèi)打包
          chunkFileNames: 'assets/js/[name]-[hash].js', //代碼塊文件名
          entryFileNames: 'assets/js/[name]-[hash].js', //入口文件名
          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', // 資源文件名
 
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id
                .toString()
                .split('node_modules/')[1]
                .split('/')[0]
                .toString()
            }
          },
        },

解釋?zhuān)?

chunkFileNames 代碼塊文件名，統(tǒng)一放到assets/js/目錄下
entryFileNames 入口文件名，統(tǒng)一放到assets/js/目錄下
assetFileNames 資源文件名，統(tǒng)一放到assets/js(jpg/png/ttf/css等)/目錄下

解釋?zhuān)?

manualChunks 此配置內(nèi)進(jìn)行分包，進(jìn)行分離帶三方依賴(lài)

上述拆分方式是自動(dòng)將所有的包都單獨(dú)拆分出來(lái)，優(yōu)點(diǎn)就是不用手動(dòng)配置，但是也有缺點(diǎn)，就是有的第三方包體積很小，會(huì)拆分出大量文件，反而降低請(qǐng)求效率

踩坑

當(dāng)項(xiàng)目使用pnpm進(jìn)行管理包的時(shí)候再進(jìn)行打包就會(huì)打出一個(gè)非常大的.pnpm包，這就不符合我們的預(yù)期了，我們要的就是小一點(diǎn)的包來(lái)進(jìn)行本地緩存

還不知道怎么解決，目前就是不使用pnpm就恢復(fù)正常了

-----------------我是分割線-----------------

已經(jīng)找到解決方法，但是這種打包拆分的方法也不是很好，缺點(diǎn)就是拆分的顆粒度太小，分包太多也是會(huì)降低速度的

 build: {
      outDir: 'dist',
      minify: 'esbuild',
      // 禁用 gzip 壓縮大小報(bào)告，可略微減少打包時(shí)間
      reportCompressedSize: false,
      // 規(guī)定觸發(fā)警告的 chunk 大小
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        //配置rollup
        output: {
          // 配置rollup輸出選項(xiàng)
          // Static resource classification and packaging//靜態(tài)資源分類(lèi)打包
          chunkFileNames: `assets/js/[name]-${visonInfo}-[hash].js`, //代碼塊文件名
          entryFileNames: `assets/js/[name]-${visonInfo}-[hash].js`, //入口文件名
          assetFileNames: `assets/[ext]/[name]-${visonInfo}-[hash].[ext]`, // 資源文件名
          manualChunks(id) {
            if (id.includes('node_modules')) {
              //使用pnpm打包
              return id.toString().split('node_modules/')[2].split('/')[0].toString()
            }
          },
        },
      },
    },

簡(jiǎn)單的說(shuō)就是，找的位置不對(duì)，直接找到.pnpm文件下的插件文件下的node_modules文件夾下，就對(duì)了，

例如：

/Users/li/project/gongsi/vue3_flow_monitoring/node_modules/.pnpm/@antv+algorithm@0.1.26/node_modules/@antv/algorithm/lib/structs/queue.js?commonjs-exports

再進(jìn)行截取就行了