在網路開發領域，JavaScript 是動態、互動式和單頁面網路應用程式背後的動力源泉。然而，隨著現代網路應用程式複雜性的增加，JavaScript 庫、框架和依賴關係的數量也在增加。這會導致程式碼庫臃腫、效率低下，影響效能和使用者體驗。
為了應對這一挑戰，JavaScript 打包程式應運而生！這些優化嚮導專門負責完善程式碼和提高效能。向 JavaScript 打包程式領域的三位重量級人物問好： Rollup、Webpack 和 Parcel – 開發者世界的明星。
本文將全面介紹這些 JS 打包程式，深入探討它們的優勢、獨特性和突出功能，同時闡明它們的優點和侷限性。
什麼是 JavaScript 打包程式？
在構建網路應用程式時，事情可能會變得相當複雜。為了保持一切井井有條和可維護性，應用程式被分成多個檔案。
但問題是：載入多個獨立檔案會降低應用程式的執行速度。這不僅是因為瀏覽器需要多次請求才能為網頁獲取這些檔案，還因為瀏覽器可能會從這些檔案中載入和處理不必要的程式碼。
打包程式通過分析應用程式的依賴關係，生成包含所有必要程式碼的單一檔案，從而幫助解決這一問題。簡單地說，JavaScript 打包程式是一種將多個 JavaScript 檔案及其依賴關係合併為一個檔案（通常稱為打包檔案）的工具。
有了 JavaScript 打包程式，我們就能實現將下列程式碼：
<head> <script type="text/javascript" src="/navbar.js"></script> <script type="text/javascript" src="/sidebar.js"></script> <script type="text/javascript" src="/some-modal.js"></script> <script type="text/javascript" src="/footer.js"></script> </head>
轉為:
<head> <script type="text/javascript" src="/compressed-bundle.js"></script> </head>
JavaScript 打包程式不僅限於 JavaScript 程式碼。它們還可以打包其他資產，如 CSS 檔案和圖片。它們還可以進行優化，如最小化、樹狀結構和程式碼拆分。
說到這裡，您可能想知道是否應該在所有專案中使用 JavaScript 打包程式。要回答這個問題，我們先來了解一下打包程式的重要性。
JavaScript 模組打包程式在現代網路開發中的重要性
在當今瞬息萬變的網路開發世界中，JavaScript 模組打包程式已成為至關重要的盟友。它們能處理管理依賴關係和組合 JavaScript 檔案的棘手任務–有點像解謎。
過去，開發人員習慣於直接在 HTML 中嵌入 <script /> 標記，或在 HTML 頁面中連結多個檔案。但隨著網路的發展，情況變得越來越複雜。由於伺服器請求過多，舊技術導致網頁載入緩慢，而且程式碼重複，開發人員需要在不同的網路瀏覽器上執行。
這就是 JavaScript 模組打包程式發揮作用的地方。它們徹底改變了我們使用 JavaScript 的方式。雖然網路瀏覽器現在支援 ES 模組，HTTP/2 等技術也解決了請求開銷的問題，但 JavaScript 打包程式仍然必不可少。
JavaScript 打包工具不僅僅是時髦的實用工具，它們還是網路開發效率的締造者。這些工具不僅能最大限度地減少請求開銷，還能增強程式碼結構、提高效能並簡化開發工作流程。
從本質上講，它們就像導體一樣，和諧地組織程式碼，加快開發速度，並確保在各種情況下都能順利執行。
隨著網路技術的不斷髮展，打包程式也在不斷調整，並在創造非凡網路體驗的過程中發揮著不可或缺的作用。但請記住，這並不是因為新工具的出現而使用它們。打包工具在現代網路開發中發揮著堅實的作用，是良好編碼實踐的基礎。
在開始探索技術層面之前，讓我們先回顧一下 JavaScript 打包程式的歷史。
JavaScript 打包程式的歷史
在網路開發的早期，管理 HTML 檔案中的指令碼標記是一個既費力又容易出錯的過程。因此，第一批 JavaScript 打包程式應運而生，它可以自動載入和執行 JavaScript 檔案。
第一代打包程式（如 RequireJS）大約在 2010 年推出。這些打包程式引入了非同步模組載入的概念，允許開發人員按照需要的順序載入 JavaScript 檔案，而不必一次性載入所有檔案。這減少了初始頁面載入時的 HTTP 請求次數，從而提高了效能。
Browserify 和 Webpack 等第二代打包程式大約在 2011-2012 年間推出。這些打包程式比第一代打包程式更強大，不僅可以用來打包 JavaScript 檔案，還可以打包 CSS 和圖片等其他資產。這使得建立更高效、效能更強的網路應用程式成為可能。
隨著時間的推移，隨著 JavaScript 功能的發展和模組化程式設計的普及，第三代打包程式應運而生。Rollup（2014 年）側重於優化庫和包的打包，而 Parcel（2017 年）則強調零配置設定和閃電般快速的開發工作流程。
近年來，React、Vue.js、Svelte.js 和 Angular 等基於元件的 UI 庫和框架的興起也影響了打包程式的發展。Create React App 和 Create Vue 等工具抽象了複雜的配置，使專案更容易設定最佳打包策略。
如今，JavaScript 打包程式已成為網路開發工具包的重要組成部分。開發人員使用它們來優化網路應用程式的效能、可維護性和可移植性。隨著 JavaScript 的不斷髮展，打包程式將繼續在幫助開發人員建立高效、高效能的網路應用程式方面發揮重要作用。
JavaScript 打包程式如何工作？
JavaScript 打包
目前有多種 JavaScript 打包程式可供選擇，雖然它們提供的功能各不相同，但一般都遵循類似的工作流程。為了更好地瞭解這些打包程式的內部工作原理，我們將把整個過程分成幾個較小的連續步驟：
1. 收集輸入
要啟動 JavaScript 打包程式，打包程式的首要任務是確定應打包的檔案。作為開發人員，您可以通過指出專案中的一個或多個主檔案來明確這一點。這些主檔案通常包含基本的 JavaScript 程式碼，這些程式碼依賴於稱為模組或依賴項的較小部分。
// main.js
Import { scream } from './Module1'; // returns string ‘scream’
import { shout } from './Module2'; // returns string ‘shout’
import { letItAllOut } from './Module3'; // returns string ‘let it all out’
// Log 'Black Eyed Peas - Scream & Shout' lyrics
console.log(`I wanna ${scream} and ${shout} and ${letItAllOut}`);
console.log("We sayin' oh we oh, we oh, we oh");
在這段程式碼中，我們的主模組（main.js）匯入了其他三個模組，稱為依賴關係。值得注意的是，每個模組都可能有自己的依賴關係。解決這些巢狀的依賴關係就進入了下一步。
2. 依賴關係解析
依賴關係解決步驟緊隨最初的輸入收集步驟之後，也是真正神奇的地方。輸入收集的重點是識別專案中的主要入口點，而依賴解析則是徹底掃描這些入口檔案中的程式碼，以發現匯入或所需的 JavaScript 模組。這項偵查工作包括跟蹤 import() 和 require() 路徑。
把它想象成組裝拼圖–每一塊拼在一起，在這一步中，JavaScript 打包程式會收集資訊，以瞭解所有這些拼圖是如何相互連線的。
依賴關係解析 – 理解模組和依賴關係之間的關係
現代 JavaScript 打包程式在依賴關係解析過程中利用了靜態分析和樹狀結構等先進技術。靜態分析可在不執行程式碼的情況下解析程式碼，加快依賴性檢測並縮短打包時間。樹狀結構消除了未使用的程式碼，確保最終的打包程式保持精簡。
此外，打包器還會建立一個視覺化圖形，表示依賴關係樹。這不僅能展示模組關係，還能進行優化。打包程式可以對模組進行重新排序，以加快載入速度，並協助解決迴圈依賴問題，確保程式碼無缺陷、高效能。
3. 程式碼轉換
打包程式在將 JavaScript 程式碼組裝成打包包之前，可能會對其進行若干轉換。這些轉換包括：
- Minification: 刪除程式碼中不必要的字元和空格，使打包包更加緊湊和精簡。
- Transpilation: 將現代 JavaScript 程式碼轉換為舊版本，以確保在各種瀏覽器和環境中的相容性。
- Optimization: 應用各種技術提高程式碼的效率。這可能包括重新安排和重組程式碼以減少冗餘，甚至應用複雜的演算法來提高效能。
4. 資產打包
雖然 JavaScript 打包程式以打包 JavaScript 程式碼而聞名，但它們也可以通過稱為資產打包的過程打包其他資產（圖片和 CSS 檔案）。
但需要注意的是，並非所有打包程式都內建了這一功能。對於某些打包程式，實現資產打包可能需要額外的設定，包括外掛、載入器和配置調整。
以下是支援資產打包時的工作原理：
- Asset importing（資產匯入）: 在程式碼中，你可以使用匯入語句來包含圖片或 CSS 等資產。
- Asset loading rules（資產載入規則）: 當打包程式遇到這些匯入語句時，它會識別出該資產需要包含在打包程式中。然後，它會針對不同的資產型別應用特定的載入規則。
- Asset processing（資產處理）: 對於圖片和 CSS 檔案等資產，打包程式會使用載入器或外掛。這些工具會對資產進行處理，其中可能包括為網路優化圖片或轉換 CSS 檔案以提高相容性。處理完成後，它們會生成唯一的 URL 或路徑，以訪問打包包中處理過的資產。
- URL generation（生成 URL）: 打包程式將用生成的 URL 或路徑替換匯入語句。例如：
const logo = '/assets/kinsta-logo.png'。 - Bundle generation（生成打包包）: 打包程式建立最終打包包時，會將這些處理過的資產作為打包包的一部分。根據配置和優化設定的不同，它們通常以 base64-encoded 資料或單獨檔案的形式新增到打包包中。
- Asset serving（資產服務）: 當你的網路應用程式在瀏覽器中載入時，它會使用生成的 URL 或路徑請求打包的資產，包括圖片。然後，這些資產將直接從打包包中提供，或在必要時從伺服器獲取。
這一過程可確保圖片和 CSS 等資產有效地包含在打包包中，並與 JavaScript 程式碼一起提供。
5. 打包
整理好所有依賴關係並對程式碼進行必要的調整後，打包程式就開始了主要工作-打包。它將所有相關的 JavaScript 檔案合併到一個大檔案中。這樣就能確保這些檔案相互依賴的順序得以保持，從而確保所有功能都能正常執行。
打包模組和依賴關係
6. 生成輸出
最後一個打包過程是建立打包後的 JavaScript 檔案，它是整個過程的最終結果。該檔案包含來自入口點的所有程式碼及其相互關聯的依賴項，將它們合併為一個具有凝聚力的實體。通常，這個打包檔案會有一個唯一的名稱，並儲存在指定的位置。
現代的打包程式通常會有額外的技巧，以增強 JavaScript 在網頁上的載入方式。其中一項功能就是程式碼分割，即巧妙地將打包包分割成小塊，只有在需要時才提取。這種策略性方法縮短了初始載入時間，帶來了更流暢、更高效的使用者體驗。
總之，JavaScript 打包程式的工作原理是彙總所有必要的 JavaScript 檔案，解決它們之間的依賴關係，對程式碼進行增強，然後將它們混合成一個單一的優化打包程式。然後將該打包包整合到網頁中，從而加快載入速度，改善使用者體驗。
Rollup、Webpack 和 Parcel 概述：優缺點
Rollup、Webpack 和 Parcel 在 Google Trends 上的對比。
Rollup、Webpack 和 Parcel 等工具在不斷擴大的現代網路開發領域中佔據著中心位置，在這一領域中，對高效資產管理和優化打包的要求至關重要。
Rollup
Rollup 是 JavaScript 的模組打包程式，它能將小型程式碼元件編譯成一個較大的專案，如庫或應用程式。它由 Rich Harris 於 2015 年建立，旨在解決 JavaScript 應用程式開發日益複雜的問題。
當時，開發人員正苦於如何有效打包 JavaScript 應用程式和庫的不同部分，這對於優化效能和確保不同瀏覽器之間的相容性至關重要。傳統的打包工具依賴於 CommonJS 和 AMD 等方法，隨著網路應用程式變得越來越複雜，這些方法往往會導致速度變慢和混亂。
將專案拆分成較小的部分通常可以簡化流程，減少意外問題，並使問題的解決變得更容易。但是，傳統的 JavaScript 無法做到這一點。
後來，ES6 的出現改變了 JavaScript 的遊戲規則。它引入了匯入和匯出函式和資料的語法，以方便在獨立的 JavaScript 檔案之間共享。雖然該功能已經建立，但在 Node.js 中仍未實現，而且僅在現代瀏覽器中可用。
Rollup 決定改變現狀。它採用了新的 ES 模組格式，使程式碼的組合更加簡潔流暢。這讓開發人員有能力混合和匹配來自不同庫的程式碼。
此外，開發人員還可以使用新模組系統編寫程式碼，同時將其無縫編譯成現有的支援格式，如 CommonJS 模組、AMD 模組和 IIFE 式指令碼。從本質上講，在獲得樹狀結構和瀏覽器相容性優勢的同時，您還獲得了編寫可擴充套件程式碼的能力。
隨著時間的推移，Rollup 在不斷髮展和適應。無論您是在開發小型庫還是大型應用程式，Rollup 都能幫助您實現目標。
使用 Rollup 的優勢
雖然 Rollup 有一些很好的優點，但在選擇打包工具時，還應該評估專案的獨特要求、團隊對工具的使用經驗以及可能影響開發工作流程的其他方面。
以下是 Rollup 的一些主要優點：
- Tree Shaking: Rollup 的優勢在於它能高效地進行樹形調整。這意味著它可以分析你的程式碼，並從最終打包包中消除任何未使用或死程式碼，從而縮小檔案大小並提高效能。
- 可配置的死程式碼消除: Rollup 允許你配置它執行死程式碼消除（DCE）的積極程度，讓你更能控制打包包大小和潛在功能之間的權衡。
- 更小的軟體包大小: 由於 Rollup 具備樹狀結構功能，且專注於 ES 模組，因此生成的打包包大小通常比其他打包程式小。這可以加快載入時間，改善使用者體驗，尤其是在低頻寬或行動網路上。
- ES 模組 (ESM) 支援: Rollup 在設計時考慮了對本地 ES 模組的支援。它能原生理解 ES 模組，從而更準確、更高效地打包現代 JavaScript 程式碼。這使它成為構建廣泛使用 ES 模組的應用程式的最佳選擇。
- 程式碼拆分: Rollup 支援程式碼分割，允許你將程式碼分割成可按需載入的小塊。這對於需要優化初始載入時間的大型應用程式尤其有用。
- 效能: Rollup 的設計強調效能。它以更快的構建時間和更高效的執行時效能而著稱，因此適合速度優先的專案。
- 外掛系統: Rollup 擁有靈活的外掛系統，可以根據需要擴充套件功能。你可以新增各種外掛來優化資產、預處理程式碼或在打包過程中執行其他任務。
- 可配置的輸出格式: Rollup 支援多種輸出格式，如 CommonJS、AMD 和 UMD 以及 ES 模組。這種多功能性滿足了專案對各種模組系統或環境相容性的要求，使其成為構建庫和包的熱門選擇。
- 保留模組結構: Rollup 可以保留程式碼的原始 ES 模組結構，使除錯和理解打包程式碼變得更容易。
- 範圍提升: Rollup 可執行作用域提升，通過將相關程式碼分組，優化並減少函式閉包的開銷。這樣可以縮小打包程式碼的規模，提高執行時效能。
- 清晰的錯誤資訊: Rollup 以其簡潔明瞭的錯誤資訊而著稱，這大大簡化了除錯過程，更容易識別程式碼或配置中的問題。
- 活躍的社羣: 雖然規模不如其他一些打包程式大，但 Rollup 擁有一個活躍且不斷髮展的社羣。這意味著你可以從使用該工具的其他開發人員那裡找到教程、外掛和支援。
- 更小的開銷: 與其他一些打包程式相比，Rollup 生成的打包程式執行時開銷較小，因此適合建立更小、更高效的應用程式。
使用 Rollup 的缺點
- 傳統瀏覽器的配置: 如果需要支援缺乏 ES 模組支援的舊版瀏覽器，Rollup 可能需要額外的配置或使用額外的工具來確保相容性。
- 有限的 HMR（熱模組替換）支援: Rollup 對熱模組替換的本地支援不如 Webpack 那麼全面。雖然有外掛可以新增 HMR 功能，但可能需要額外的設定和配置。
- 社羣規模較小: 雖然 Rollup 擁有一個活躍的社羣，但其規模不如 Webpack 等更受歡迎的打包程式社羣大。這可能意味著可用資源、教程和社羣驅動的解決方案較少。
- 有限的動態匯入處理: 雖然 Rollup 支援動態匯入，但它在處理涉及動態匯入的複雜場景時，可能不如其他一些打包程式無縫，尤其是在處理大型專案時。
Webpack
Webpack 是網路開發世界中的一個重要工具。Webpack 誕生於 2012 年，當時網路開發正在不斷髮展，新的挑戰層出不窮，尤其是在高效管理現代網路應用的資產方面。
在當時，建立單頁面應用程式並有效處理 JavaScript 檔案、樣式表和影象等網路資產是一項挑戰。現有的工具缺乏處理複雜工作流程所需的靈活性和可擴充套件性，這導致了 Webpack 的誕生。
Webpack 引入了一種使用模組組織程式碼的新方法。將這些模組想象成網站的樂高積木。與其他工具不同，Webpack 可以輕鬆地將這些積木無縫組裝起來。
它將程式碼轉化為瀏覽器可以快速理解的語言，從而加快了網站的載入速度，帶來更流暢的使用者體驗。但它並沒有止步於此。Webpack 的真正優勢在於其適應性。它允許開發人員根據自己的具體需求定製專案，從簡單的任務到複雜的工作。可以把它想象成專案的 “自建冒險”。從簡單的任務到複雜的任務，你都可以按照自己的喜好進行設定。
對於追求定製化和靈活性的網路開發人員來說，Webpack 是值得信賴的選擇。
使用 Webpack 的優勢
以下是 Webpack 在現代網路開發中的一些主要優勢。
- 模組化開發: Webpack 基於模組的方法鼓勵模組化開發，允許開發人員將程式碼分解成更小、更易於管理的片段。這促進了程式碼的可重用性、可維護性以及團隊成員之間的協作。
- 打包優化: Webpack 擅長使用程式碼拆分、樹狀結構和消除死程式碼等技術優化打包包。這使得打包包的大小更小、載入時間更快、網路應用程式的整體效能更好。
- 可擴充套件性: 通過使用載入器和外掛，Webpack 的架構具有很強的可擴充套件性。開發人員可以根據自己的具體需求定製構建流程，無縫整合各種工具和前處理器。
- 開發體驗: Webpack 的熱模組替換（HMR）功能可在開發過程中提供即時反饋。開發人員無需重新整理整個頁面就能實時看到變化，這大大加快了除錯和迭代過程。
- 豐富的生態系統: Webpack 擁有一個充滿活力的生態系統，其中包含大量社羣貢獻的載入器、外掛和預設。這個龐大的生態系統能滿足各種開發需求，從優化影象到與不同的前端框架整合。
- 程式碼拆分: Webpack 內建的程式碼拆分功能可以建立更小的程式碼塊，並按需載入。這就加快了初始頁面載入速度，改善了使用者體驗，尤其是對於程式碼庫龐大的應用程式而言。
- 動態匯入: Webpack 支援動態匯入，這對於按需載入應用程式的懶載入部分特別有用。
- 快取和長期快取: Webpack 支援高階快取機制，允許瀏覽器高效地快取資產。長期快取可確保資產在多個部署中保持快取狀態，從而減少返回使用者的載入時間。
- 高階配置: Webpack 的配置系統可對打包過程進行高度控制，這對大型複雜專案至關重要。
使用 Webpack 的缺點
- 複雜的配置: 配置 Webpack 可能會讓人望而生畏，對於初學者來說尤其如此。大量的選項、載入器和外掛可能會導致陡峭的學習曲線，需要仔細管理。
- 效能開銷: 雖然 Webpack 的優化通常能提高效能，但在開發階段，尤其是在大型專案中，該工具本身可能會帶來效能開銷。
- 開發構建緩慢: Webpack 可能會花費很長時間來構建應用程式，尤其是在頻繁更改的開發階段。這可能會讓那些希望自己的更改能快速反映在瀏覽器中的開發人員感到沮喪。
Parcel
Parcel 於 2017 年釋出，是一個開源專案，旨在簡化與傳統打包程式相關的複雜性。它倡導零配置方法，將開發人員從複雜的初始專案設定中解放出來。
傳統的打包工具通常需要大量配置，導致開發人員的設定過程非常繁瑣。但有了 Parcel，開發人員就可以直接進入專案，而不必被設定任務所淹沒。從資產管理到模組打包，它能自動完成大部分任務，使開發工作更加順暢。
Parcel 的突出特點是原生支援各種資產型別，包括 HTML、CSS、JavaScript 以及影象和字型等專用資產。它能將這些資產無縫整合到專案中，無需進行大量設定，從而簡化了開發流程。
儘管 Parcel 是一款新產品，但它還是吸引了尋求輕鬆打包體驗的開發人員。它既簡單又不影響效能，為構建工具世界帶來了一股新鮮空氣。
使用 Parcel 的優勢
- 零配置設定: Parcel 最大的特點可能就是零配置設定。Webpack 和 Rollup 通常需要複雜的配置檔案才能啟動，而 Parcel 則不同，它會自動檢測和配置大多數專案設定。這使它對初學者來說非常容易上手，讓開發人員無需花時間配置就能快速上手並執行。
- 最適合初學者的打包工具: Parcel 的 “零配置” 方法對剛進入生態系統的開發人員尤為有利，可減少與複雜配置相關的學習曲線。
- 內建資產處理: Parcel 內建支援各種資產型別，包括圖片、CSS、HTML 等。您無需為常見的資產型別設定載入器或外掛，從而簡化了開發流程，減少了對額外配置的需求。
- 自動解決依賴性問題: Parcel 可自動分析專案的依賴關係，並根據需要將其打包。這一功能消除了在配置檔案中手動指定入口點和依賴關係的需要，使開發和程式碼維護更加簡單明瞭。
- 快速構建時間: Parcel 利用多核處理技術在所有核心之間並行處理工作，充分利用了現代硬體的優勢，從而加快了構建時間，提高了開發人員在開發週期中的工作效率。
- 程式碼分割變得簡單: Parcel 通過其神奇的匯入策略自動進行程式碼拆分，無需明確干預即可提高效能。
- 熱模組替換: Parcel 的開發伺服器整合了開箱即用的熱模組替換功能，無需手動重新載入即可實現實時更新。
- 多語言支援: Parcel 開箱即支援多種語言，包括 JavaScript、TypeScript 等。
- 注重開發人員體驗: Parcel 優先考慮流暢和開發人員友好的體驗。它的零配置方法和開箱即用的功能迎合了開發人員的需求，他們希望專注於編寫程式碼，而不是管理構建工具配置。
使用 Parcel 的缺點
- 配置靈活性有限: 雖然 Parcel 的零配置方法對很多人來說都很有利，但對於有特殊要求的專案來說，它可能會限制定製的可能性。
- 外掛生態系統: Parcel 的外掛生態系統雖然在不斷髮展壯大，但其廣度和多樣性可能不及更成熟的打包程式。
- 支援: Parcel 是一個較新的打包程式，因此它可能無法獲得與 Webpack 等更成熟的打包程式相同水平的支援。
Rollup、Webpack 和 Parcel 的比較
是時候在聚光燈下分析這三種打包程式的效能了。我們將對每個打包程式進行測試，觀察它們在構建時間、打包程式大小和整體優化方面的表現。
配置和易用性
構建 Vue 3 元件庫是促進不同專案間程式碼重用和可維護性的實用方法。在本節中，我們將引導您完成建立 Vue 3 元件庫的過程，然後將其與三個著名的打包程式整合： Rollup、Webpack 和 Parcel。
Vue 3 元件庫設定
首先，我們將為專案建立一個新目錄並導航到該目錄。
mkdir kinsta-component-library cd kinsta-component-library
使用 Vue CLI 初始化新的 Vue.js 專案。如果尚未安裝 Vue CLI，可使用以下命令進行安裝：
npm install -g @vue/cli
然後，我們可以建立一個新的 Vue 專案：
vue create .
按照提示選擇預設預設或根據需要手動選擇功能。專案建立完成後，導航至專案目錄並探索其結構。如果你是 Vue 的新手，這裡有 10 個基本的 Vue.js 概念供你入門。
接下來，導航到 src/components 目錄，你會發現已經建立了一個 HelloWorld.vue 檔案。複製這個元件三次，更改每個檔案的名稱，然後將它們移到名為 Greeting 的資料夾中，這樣我們的元件庫就可以有多個元件了。資料夾結構如下
- src - components - Greetings - HelloWorld.vue - HelloWorldTwo.vue - HelloWorldThree.vue - HelloWorldFour.vue
最後，在 Greeting 資料夾中建立一個 greetings.js 檔案，並匯出所有元件：
export { default as HelloWorld } from "./HelloWorld.vue";
export { default as HelloWorldTwo } from "./HelloWorldTwo.vue";
export { default as HelloWorldThree } from "./HelloWorldThree.vue";
export { default as HelloWorldFour } from "./HelloWorldFour.vue";
現在，您的 Vue.js 專案已經就緒，讓我們深入瞭解打包程式的世界，觀察 Rollup、Webpack 和 Parcel 在實際應用中的表現。
Rollup：打包 Vue 3 元件庫
首先將 Rollup 安裝為開發依賴項：
npm install rollup rollup-plugin-vue rollup-plugin-css-only @rollup/plugin-image --save-dev
接下來，在專案根目錄下建立一個 rollup.config.js 檔案，以便根據需要配置 Rollup：
import vue from "rollup-plugin-vue";
import css from "rollup-plugin-css-only";
import image from "@rollup/plugin-image";
export default {
input: "src/components/Greeting/greetings.js",
output: {
file: "dist/bundle.js",
format: "esm",
},
plugins: [css(), vue({ css: false }), image()],
external: ["vue"],
};
在上述示例中，使用了三種不同的外掛，以確保 Rollup 能夠理解並打包不同型別的資產：
- rollup-plugin-vue: 該外掛用於以 SFC 格式（單檔案元件）將 Rollup 與 Vue.js 整合。
- rollup-plugin-css-only: 該外掛可監控 CSS 匯入並將其作為一個資產釋出。
- @rollup/plugin-image: 一個 Rollup 外掛，用於匯入 JPG、PNG、GIF、SVG 和 WebP 檔案。
設定完成後，執行 Rollup 生成過程：
npx rollup -c
Webpack: 打包 Vue 3 元件庫
要將您的庫與 Webpack 整合，首先要安裝所需的依賴項：
npm install css-loader vue-style-loader webpack webpack-cli --save-dev
在專案根目錄下建立 webpack.config.js 檔案並配置 Webpack。下面是一個例子：
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
mode: "development",
entry: "./src/components/Greeting/greetings.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "my-library.js",
library: "MyLibrary",
libraryTarget: "umd",
umdNamedDefine: true,
},
module: {
rules: [
{
test: /.vue$/,
loader: "vue-loader",
},
{
test: /.css$/,
use: ["vue-style-loader", "css-loader"],
},
],
},
plugins: [new VueLoaderPlugin()],
resolve: {
alias: {
vue$: "vue/dist/vue.esm-bundler.js",
},
},
};
在上面的程式碼中，使用了三種不同的外掛和載入器：
- VueLoaderPlugin: 用於 Vue 單檔案元件的 Webpack 載入器。
- vue-style-loader: 該載入器會將 CSS 動態注入文件的樣式標記中。
- css-loader: 載入器會像
import/require()一樣解釋@import和url()，並對其進行解析。
我們還必須使用 path.resolve() 將路徑解析為絕對路徑。
執行 Webpack 打包過程：
npx webpack --config webpack.config.js
Parcel: 打包 Vue 3 元件庫
最後，讓我們來探索以零配置方法著稱的 Parcel。首先將 Parcel 安裝為開發依賴項：
npm install --save-dev parcel
在 package.json 檔案中，更新必要的行以顯示原始檔和模組檔案：
"source": "src/components/Greeting/greetings.js", "module": "dist/main.js"
調整構建指令碼以使用 Parcel：
"build": "parcel build"
現在，Parcel 會自動檢測專案所需的所有外掛和載入器，併為您安裝，然後繼續打包過程。執行構建指令碼，體驗 Parcel 簡單易用的打包過程：
npm run build
總結：配置和易用性比較
現在，我們已經將每個打包程式與 Vue 整合在一起，構建了一個元件庫，讓我們來提取一些觀察結果：
- Rollup: Rollup 提供了一個簡潔明瞭的配置過程。不過，需要注意的是，某些方面（如處理 CSS 和圖片）可能需要額外的手動配置。Rollup 專注於優化和效能，這對中小型 Vue 3 元件庫很有幫助。
- Webpack: Webpack 提供了廣泛的可配置性，可對打包過程的各個方面進行強大的控制。雖然其配置可能比較複雜，但它為大型和複雜的 Vue 3 元件庫提供了強大的解決方案。學習曲線可能比較陡峭，但在定製和優化至關重要的專案中，這種投資是有回報的。
- Parcel: Parcel 的零配置方法大大減少了配置開銷，使打包 Vue 3 元件更容易上手。它能自動檢測和設定大部分設定，簡化了快速開發的過程。此外，它還允許開發人員修改和自定義工具設定的預設配置。
值得注意的是，Rollup 還為配置檔案中的 import() 和 export() 提供了節點多填充功能，而 Webpack 卻缺乏這些功能。此外，Rollup 接受相對路徑，而 Webpack 則不接受，因此需要使用 path.resolve() 等其他方法。
基準：構建時間和軟體包大小
在這次基準比較中，我們評估了三種打包程式的效能。這些測試是在配備了 Apple M1 晶片和 8 核 GPU、8GB 記憶體的 MacBook Air 上進行的，重點測試了包含 10 個元件的 Vue 3 元件庫。請注意，實際結果會因專案的複雜性和配置而異。
構建時間
| Rollup [Latest] (ms) | Webpack [Latest] (ms) | Parcel [Latest] (ms) | |
| Dev first build | 350 | 700 | 500 |
| Dev reload | 50 | 25 | 40 |
- Rollup: Rollup 領先。它在設計時充分考慮了效能，擅長快速生成優化的打包包。這使得 Rollup 成為中小型專案的理想選擇，在這些專案中，快速構建時間至關重要。
- Webpack: 另一方面，Webpack 提供了廣泛的功能和強大的外掛生態系統，但這種多功能性的代價是稍慢的構建時間。與 Rollup 相比，Webpack 處理複雜專案和不同資產型別的能力可能會導致更長的構建時間。
- Parcel: Parcel 的目標是提供開箱即用的零配置體驗，因此通常可以快速完成設定和構建過程。不過，在處理大型專案或需要進行更多定製時，Parcel 的速度可能會落後於 Rollup 和 Webpack。
打包尺寸
| Rollup [Latest] (KB) | Webpack [Latest] (KB) | Parcel [Latest] (KB) | |
| Bundle Size | 90 | 140 | 110 |
- Rollup: Rollup 利用樹狀結構、ES6 模組、作用域提升、最小化、程式碼拆分和外掛生態系統等優化技術生成小型打包包。
- Webpack: 由於配置複雜，Webpack 產生的打包包比 Rollup 和 Parcel 要大。與 Rollup 和 Parcel 不同，使用 Webpack 實現較小的打包包需要仔細的配置。
- Parcel: Parcel 的打包包比 Webpack 的小，但比 Rollup 的大，這是因為 Parcel 採用了使用者友好的零配置方法、預設的 Babel 轉換、不太激進的樹狀抖動，以及比 Webpack 更小的執行時開銷。
受歡迎程度
衡量開發者社羣對不同構建工具的偏好的一種有見地的方法是檢視流行度指標。我們使用 NpmTrends 網站對 Rollup、Webpack 和 Parcel 進行了比較。
Rollup vs Webpack vs Parcel 下載量比較
根據 npm 軟體包的下載量，上圖描繪了這些工具的受歡迎程度。讓我們使用 star-history.com 網站來看看 Github 星級之間的比較：
Rollup vs Webpack vs Parcel Github 星級比較
Rollup 擅長減少打包包的大小並提高效能，因此深受庫和小型專案的歡迎。Webpack 是一款廣受認可、文件豐富的工具，以處理各種檔案型別的多功能性和強大的社羣支援而著稱。另一方面，Parcel 以其簡單性和快速設定脫穎而出，是小型專案和快速原型的理想選擇。
請記住，隨著時間的推移，這些工具的受歡迎程度會隨著開發趨勢的變化和新工具解決方案的出現而變化。在決定將哪種構建工具納入自己的專案時，密切關注社羣的動向可以幫助你選擇正確的方向。
開發人員體驗
Rollup 以簡潔為先，強調以最少的配置高效建立打包包，因此非常適合尋求直接設定的開發人員。另一方面，Webpack 擁有龐大的外掛和載入器生態系統，可為複雜的專案提供高度定製化，但也可能帶來學習曲線，尤其是對新手而言。
相比之下，Parcel 兌現了零配置的承諾，減少了設定時間和複雜性，是快速原型開發和小型專案的有力選擇。
社羣和生態系統
Webpack 擁有一個龐大而成熟的生態系統。其龐大的社羣帶來了數不勝數的資源、教程和第三方外掛。這個生態系統可以滿足不同專案規模和複雜程度的開發人員的需求。
Rollup 的生態系統雖然比 Webpack 的小，但卻充滿活力並在穩步發展。它尤其吸引以效能優化和最小配置為目標的開發人員。它還擁有大量外掛，可幫助開發人員簡化工作流程。
Parcel 的社羣圍繞著對初學者友好的方法展開。它的生態系統為小型專案提供快速解決方案和支援，簡化了新開發人員的入職流程。它沒有太多由社羣建立的外掛，但可以讓開發人員自定義工具的核心外掛。
對比透視與總結
讓我們回顧一下關於 Rollup、Webpack 和 Parcel 的知識，幫助您做出明智的選擇。
| 對比項 | Rollup | Webpack | Parcel |
| 配置複雜性 | 適中：同時支援配置檔案和程式配置 | 高：需要複雜的配置檔案 | 低：零配置設定，可選配置 |
| 資產處理 | 需要為資產安裝外掛 | 資產需要載入器和外掛 | 內建支援常見資產型別，只需極少設定 |
| Tree Shaking | tree-shaking能力最強，通常更高效 | 支援，但可能需要仔細配置 | 與 Webpack 相比，已提供支援並進行了簡化 |
| ES6 模組側重點 | 是的，圍繞 ES6 模組設計。 | 是，支援 ES6 模組 | 是，支援 ES6 模組和多種語言 |
| 程式碼分割 | 支援通過配置分割程式碼 | 對程式碼分割的廣泛控制 | 只需少量設定即可自動分割程式碼 |
| HMR（熱模組更換） | 有限支援 | 支援 | 支援內建開發伺服器 |
| 效能優化 | 用於優化的外掛系統 | 廣泛的優化外掛生態系統 | 自動優化 |
| 社羣和生態系統 | 社羣規模較小，但在不斷擴大 | 龐大而活躍的社羣 | 發展社羣，注重簡約 |
| 輸出格式 | 靈活的輸出格式選項 | 靈活的輸出格式選項 | 適用於不同環境的多種輸出格式 |
| 庫與應用的側重點 | 常被用於建造庫 | 適用於庫和應用程式 | 應用和原型設計能力強 |
| 開發伺服器 | 需要對 HMR 進行額外設定 | 需要為 HMR 進行額外設定 | 帶 HMR 的內建開發伺服器 |
| 軟體包管理器整合 | 與 npm 和 Yarn 整合 | 與 npm 和其他系統配合良好 | 與常用軟體包管理器整合 |
介紹 Vite： 新一代構建工具
雖然 Rollup、Webpack 和 Parcel 一直是打包遊戲的傳統玩家，但像 Vite 這樣的新競爭者正在崛起。
Vite（發音類似於 “veet“）因其對構建流程的創新和對更快開發工作流程的承諾，在網路開發者中迅速獲得了關注。
Vite 採用了一種根本不同的打包方法。Vite 並不預先打包所有程式碼和資產，而是採用按需打包的方式。它利用現代瀏覽器中的本地 ES 模組直接提供程式碼，避免了開發過程中耗時的打包步驟。
這使得熱模組替換（HMR）幾乎立竿見影，大大縮短了開發過程中的冷啟動時間。
雖然 Vite 的開發伺服器採用了按需方法，但仍能提供優化的生產構建。它通過使用 Rollup 進行生產打包來實現這一目標，並利用了同樣經過實戰檢驗的打包功能，這也是 Rollup 廣受歡迎的原因。
重要的是，Vite 的影響力並不侷限於幾個小型框架，它甚至涉及到網路開發領域最受歡迎的公司。例如：
- Nuxt.js: Nuxt 曾經是 webpack 的使用者，現在已改用 Vite。
- Astro: Astro 團隊現在是 Vite 生態系統的貢獻者和積極參與者，他們合作加強這兩個動態工具的整合，使開發人員在製作高效能網路應用程式時獲得無縫體驗。
- Svelte.js: Svelte 可與 Vite 無縫整合，用於專案腳手架。
- Laravel PHP: Vite 並不侷限於 JavaScript 框架。Laravel PHP 框架也加入了受益於 Vite 功能的行列。Laravel 與 Vite 的整合帶來了和諧，提升了開發人員的體驗。
- Inertia.js: Inertia 還在 Vue 中加入了對 Vite 的支援，使其成為更多開發人員的首選工具。
- Sanity.io: Sanity Studio 是一個實時內容管理系統（CMS）。其最新版本（即第 3 版）包括基於 Vite 的本地開發整合工具。
Vite 是否適合您的專案取決於您的具體使用情況。如果開發速度、HMR 效能和簡化的開發體驗是最優先考慮的因素，那麼 Vite 可能非常適合。但是，對於具有複雜構建要求的複雜專案，或者對於向後相容性至關重要的專案，必須仔細評估 Vite 的獨特方法是否符合您的需求。
小結
顯然，在 Rollup、Webpack 和 Parcel 之間做出選擇取決於專案的需求。這三個選項各有所長。掌握了這些知識，你就能為你的網路冒險做出正確的選擇。請記住，正確的打包工具就像一個值得信賴的編碼夥伴，幫助您實現編碼目標。
評論留言