使用vite項目打包資源分配目錄

更新時間：2024年07月01日 14:55:12 作者：前端-阿元

這篇文章主要介紹了使用vite項目打包資源分配目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vite項目打包資源分配目錄

vite項目打包后所有資源都放在了assets文件夾中，像傳統(tǒng)工程一樣分為不同的文件夾，js放js文件夾，css放css文件夾，圖片放img文件夾

vite無論是當做是腳手架還是構建工具，內部實現原理就是Rollup和esbuild

Rollup會深度影響打包結果，如何在vite里面配置Rollup，Rollup相關配置

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
 
export default defineConfig({
  plugins: [
    vue(),
  ],
  build: {
    rollupOptions:{
      output: {
        entryFileNames: 'js/[name].js',//入口文件
        // entryFileNames: 'js/[name]-[hash].js',//入口文件
        chunkFileNames: 'js/[name].js',//分包引入文件
        // chunkFileNames: 'js/[name]-[hash].js',//分包引入文件
        // assetFileNames: '[ext]/[name]-[hash].[ext]',//靜態(tài)文件
        assetFileNames(assetInfo){
          console.log(assetInfo)
          //文件名稱
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name].css'
            // return 'css/[name]-[hash].css'
          }
          //圖片名稱
          //定義圖片后綴
          const imgExts = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg','.ico']
          if(imgExts.some(ext => assetInfo.name.endsWith(ext))){
            return 'imgs/[name].[ext]'
            // return 'imgs/[name]-[hash].[ext]'
          }
          //剩余資源文件
          return 'assets/[name].[ext]'
          // return 'assets/[name]-[hash].[ext]'
        }
      },
    },
  },
 
});

vite打包流程和原理

打包原理

vite利用了ES module這個特性，使用vite運行項目時，首先會用esbuild進行預構建，將所有模塊轉換為es module，不需要對我們整個項目進行編譯打包，而是在瀏覽器import某個模塊時，發(fā)送一個HTTP請求去加載文件，vite啟動一個 koa 服務器攔截這些請求，攔截瀏覽器發(fā)出的請求，根據請求進行按需編譯，然后返回給瀏覽器。

Vite有如下特點：

快速的冷啟動: No Bundle + esbuild 預構建
即時的模塊熱更新: 基于ESM的HMR，同時利用瀏覽器緩存策略提升速度
真正的按需加載: 利用瀏覽器ESM支持，實現真正的按需加載

Vite比Webpack快？

主要體現在啟動很快！

所有模塊都是在請求時才被打包和渲染的，因此自然是無法解決的。

你會發(fā)現第一次請求之后就會快很多。

在生產環(huán)境下的表現

vite生產環(huán)境下，為什么使用rollup打包呢？

Rollup 是一款 ES Module 打包器，從作用上來看，Rollup 與 Webpack 非常類似。不過相比于 Webpack，Rollup要小巧的多，打包生成的文件更小。因為小巧，自然在這種特定的打包環(huán)境下，Rollup的打包速度也要比 Webpack 快很多。
vite正是基于es module的特性實現的，所以使用rollup要更合適一些。

vite生產環(huán)境下，為什么不用esbuild打包呢？

盡管esbuild的打包速度比rollup更快，但 Vite 目前的插件 API 與使用 esbuild 作為打包器并不兼容，rollup插件api與基礎建設更加完善，所以在生產環(huán)境vite使用rollup打包會更穩(wěn)定一些。
如果后面esbuild基礎建設與生態(tài)更加完善后，esbuild還是更有優(yōu)勢的。

所以使用vite可能會帶來開發(fā)環(huán)境與生產環(huán)境打包結果不一致的問題。

啟動項目后，完成加載比較慢？

vite項目的啟動確實比webpack快，但如果某個界面是首次進入，且依賴比較多/比較復雜的話，那就會比較慢，因為它只會對一小部分代碼進行一些簡單的處理，剩余的工作都交給瀏覽器，以及運行時進行依賴分析，動態(tài)打包，動態(tài)引入。

慢的主要原因就是vite需要動態(tài)的解析依賴，并打包，以下是解決方案：

讓vite在啟動之初就對某些資源進行預打包，盡量避免后續(xù)的動態(tài)打包
通過配置vite-plugin-optimize-persist插件，首次加載的時候，依然會很慢，這個是正?，F象，因為首次插件也無法知道，哪些依賴需要預構建，是在vite動態(tài)引入資源的時候，將這些資源都記錄下來，自動寫入了package.json中，當再次啟動項目的時候，插件會讀取之前他寫入在package.json中的數據，并告知vite，這樣vite就能對這些資源進行預構建了，也就能加快進入界面的速度了，但相應的啟動速度就會比原來稍微慢一點。有意義？因為這個文件可以重復利用，后續(xù)啟動和別人使用的時候都會加快打包速度。

Esbuild & Rollup

1、開發(fā)環(huán)境：Esbuild

是一個JavaScript、 Bundler 打包和壓縮工具，它提供了與Webpack、Rollup等工具相似的資源打包能力?？梢詫avaScript

預構建：

支持commonJS依賴
上面提到Vite是基于瀏覽器原生支持ESM的能力實現的，但要求用戶的代碼模塊必須是ESM模塊，因此必須將commonJs的文件提前處理，轉化成 ESM 模塊并緩存入 node_modules/.vite
減少模塊和請求數量（我們常用的lodash工具庫，里面有很多包通過單獨的文件相互導入，而 lodash-es這種包會有幾百個子模塊，當代碼中出現 import { debounce } from ‘lodash-es’ 會發(fā)出幾百個 HTTP 請求，這些請求會造成網絡堵塞，影響頁面的加載。
Vite 將有許多內部模塊的 ESM 依賴關系轉換為單個模塊，以提高后續(xù)頁面加載性能。
通過預構建 lodash-es 成為一個模塊，也就只需要一個 HTTP 請求了）

Esbuild優(yōu)點：

編譯運行 VS 解釋運行
大多數前端打包工具都是基于 JavaScript 實現的，大家都知道JavaScript是解釋型語言，邊運行邊解釋。而 Esbuild 則選擇使用 Go 語言編寫，該語言可以編譯為原生代碼,在編譯的時候都將語言轉為機器語言，在啟動的時候直接執(zhí)行即可，在 CPU 密集場景下，Go 更具性能優(yōu)勢。
多線程 VS 單線程
JavaScript 本質上是一門單線程語言，直到引入 WebWorker 之后才有可能在瀏覽器、Node 中實現多線程操作。就我對Webpack的源碼理解，其源碼也并未使用 WebWorker 提供的多線程能力。而GO天生的多線程優(yōu)勢。
對構建流程進行了優(yōu)化，充分利用 CPU 資源

2、生產環(huán)境：Rollup

Rollup是基于ESM的JavaScript打包工具。相比于其他打包工具如Webpack，他總是能打出更小、更快的包。

因為 Rollup 基于 ESM 模塊，比 Webpack 和 Browserify 使用的 CommonJS模塊機制更高效。

Rollup的亮點在于同一個地方，一次性加載。

能針對源碼進行 Tree Shaking(去除那些已被定義但沒被使用的代碼)，以及 Scope Hoisting 以減小輸出文件大小提升運行性能。