構建工具：俗稱打包。

理解：將模塊文件進行合併，代碼壓縮，整合資源等一系列自動化操作。

為什麼會出現構建工具這項技術？

我們希望看到頁面加載平滑，快速進行響應。
通過：
1.編寫代碼的邏輯，避免無效浪費內存資源，即優化代碼；
2.優化瀏覽器請求資源的速度；
原因： 首先瀏覽器加載資源 請求的文件數量越多越耗時，文件容量越大越耗時。但是為了我們前端項目結構清晰，我們一般會分成很多了文件代表不同的模塊便於開發。所以為了解決與瀏覽器運行效率產生的矛盾，可以將文件進行合併，減少文件數量，將代碼進行壓縮，降低文件容量。

上述這工作理論上是可以人工完成的，但是它繁瑣，工作量大，本質是無意義的勞動。
這個時候為了解決這個繁瑣過程，人們就會去發明工具，所以構建工具相應出現了。
目的：提升項目性能，提高開發效率。

構建工具的發展

有了工具能滿足基本的打包工作，對於開發人員而言總是需要更精益求精。就像在一輛能發動的車上去安裝各種零件來提升使用者的體驗。這些零件就是構建工具所需要的插件，這些插件對提升開發效率很有幫助，包括語法轉換（Babel），模板熱更新（HotModuleReplacementPlugin），清理重複的打包的文件（clean-webpack-plugin）等等。

構建工具目前來説還在處於不停發展的階段，但是相應的打包技術已經很成熟。 本次主要介紹市面上比較火熱的Grunt， Webpack, Vite這三個打包工具之間的對比和它們的優勢。

構建工具介紹

Grunt: 是一個優化前端的開發流程的工具。
配置一系列的task，定義task處理的事務（例如文件壓縮合並、啓動server、版本控制等），然後定義執行順序，來讓Grunt執行這些task，從而構建項目的整個前端開發流程。
工作方式：

Wepack: 是一種模塊化的解決方案。更強調模塊化。
把你的項目當做一個整體，通過一個指定的主文件名（index.js, 一般是入口文件），webpack 將從這個文件開始找到你的項目所依賴的文件，使用loaders 來處理它們，最後打包為一個瀏覽器可識別的js 文件。

Vite: 一種新型前端構建工具,它區別與不同的打包工具,它在開發環境中不對項目進行整體打包。
原因：當我們的構建的項目越來越龐大時，對整個項目進行資源整合的時間會變長，如果有數千個模塊的項目在進行構建時甚至需要幾分鐘才能啓動開發服務器。所以vite解決了在開發過程中需要等待整個項目打包這一段過程，讓開發時更加絲滑。
依賴：使用esbuild（GO編寫）預構建依賴，比 JavaScript 編寫的打包器預構建依賴快 10-100 倍。
源碼：在瀏覽器請求資源時-> vite轉換一些非js文件->動態導入代碼。
源碼利用瀏覽器的協商緩存（304 Not Modified），依賴模塊請求則會通過 Cache-Control: max-age=31536000, immutable 進行強緩存，保持熱更新的速度。

如何選擇適合的構建工具？

Grunt對於一些中小型項目而言更加輕便和靈活，如果只針對代碼壓縮合並，Grunt就可以滿足要求，發展歷程長，基本是穩定的。但是如果要處理龐大的項目文件，特別是處理多種類型的資源文件，強調模塊開發，Webpack則更適合這個場景。Webpack對於中大型項目而言是更加穩定的，文檔資料和迭代速度也很快。當然這對開發人員而言也是挺頭疼的，隔一段時間就需要去適應文檔的配置。Vite作為一門新的構建技術，想要它去構建一門穩定的中大型項目有點冒險，雖然已經發布穩定版本，但是還是會有一些潛在的風險，等它更多人推廣後使用更加穩妥，但是對於平時構建一些個人網站和項目等使用vite，感受一下它的便捷也可以。