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

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

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

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

在開發(fā)Vue3項目時，我們使用vite進行構(gòu)建，由于項目中開發(fā)的是地圖大屏項目，依賴較多

為了提高用戶體驗減少用戶等待的時間，對此進行優(yōu)化：

拆分打包的方法

// vite.config.ts

output: {
          // 配置rollup輸出選項
          // Static resource classification and packaging//靜態(tà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()
            }
          },
        },

解釋：1

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

解釋：2

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

上述拆分方式是自動將所有的包都單獨拆分出來，優(yōu)點就是不用手動配置，但是也有缺點，就是有的第三方包體積很小，會拆分出大量文件，反而降低請求效率

踩坑

當項目使用pnpm進行管理包的時候再進行打包就會打出一個非常大的.pnpm包，這就不符合我們的預期了，我們要的就是小一點的包來進行本地緩存

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

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

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

 build: {
      outDir: 'dist',
      minify: 'esbuild',
      // 禁用 gzip 壓縮大小報告，可略微減少打包時間
      reportCompressedSize: false,
      // 規(guī)定觸發(fā)警告的 chunk 大小
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        //配置rollup
        output: {
          // 配置rollup輸出選項
          // Static resource classification and packaging//靜態(tà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()
            }
          },
        },
      },
    },

簡單的說就是，找的位置不對，直接找到.pnpm文件下的插件文件下的node_modules文件夾下，就對了，

例如：

/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

再進行截取就行了