webpack中的打包優化，壓縮配置

webpack概念：現代javascript應用程式的靜态子產品打包器。當webpack處理應用程式時，它會遞歸地建構一個依賴關系圖，其中包含應用程式需要的每個子產品，然後将所有這些子產品打包城一個或多個bundle。

1.入口：入口起點訓示webpack應該使用哪個子產品，來作為建構其内部依賴圖的開始。單頁面配置一個入口，多頁面配置多個入口

2.出口output告訴webpack在哪裡輸出它所建立的bundles,以及如何命名這些檔案。

3.loader讓webpack能夠去處理那些非javascript檔案(webpack自身隻了解javascript)。loader一般是開發時的依賴。loader可以将所有類型的檔案轉換為webpack能夠處理的有效子產品。

如同:less,sass，jsx，vue等檔案，如果沒有打包工具進行轉換，則浏覽器無法識别。

4.插件plugins, 插件可以用于執行範圍更廣的任務。打包優化，壓縮

5.模式：通過不同的模式打包的效果不同，其内部有一些預設的優化配置。

多頁面應用 //根據經驗：每個 html 文檔隻使用一個入口起點

使用 <code>commonschunkplugin</code> 為每個頁面間的應用程式共享代碼建立 bundle。由于入口起點增多，多頁應用能夠複用入口起點之間的大量代碼/子產品，進而可以極大地從這些技術中受益。

輸出：即使可以存在多個<code>入口</code>起點，但隻指定一個<code>輸出</code>配置。

模式：

1

loader用于對子產品的源代碼進行轉換。loader可以使你在import或加載子產品時預處理檔案。是以，loader類似于其他建構工具中的"task",loader可以将檔案從不同的語言（如typescript）轉換為javascript

loader常用的調用形式，調用順序是從右到左，從下到上。

url-loader和file-loader的差別

1、url-loader依賴file-loader

2、當使用url-loader加載圖檔，圖檔大小小于上限值，則将圖檔轉base64字元串，否則使用file-loader加載圖檔，都是為了提高浏覽器加載圖檔速度。

3、使用url-loader加載圖檔比file-loader更優秀

優化：

dev開發階段：

1.hmr,熱子產品重載，提高打包速度，提升開發速度

2.不要放過第三方插件庫，commonschunkplugin 每次建構時都會重新建構一次 vendor，dllplugin這個依賴庫不會跟着你的業務代碼一起被重新打包，隻有當依賴自身發生版本變化時才會重新打包。

vendor.js 不必解釋，是我們第三方庫打包的結果。這個多出來的 vendor-manifest.json，則用于描述每個第三方庫對應的具體路徑。

3.happypack——将 loader 由單程序轉為多程序

4.删除備援代碼，tree-shaking

uglifyjsplugin ，壓縮過程中對碎片化的備援代碼（如 console 語句、注釋等）進行自動化删除：

5.按需加載

如果我把這整個項目打一個包，使用者打開我的網站時，會發生什麼？有很大機率會卡死，對不對？更好的做法肯定是先給使用者展示首頁，其它頁面等請求到了再加載。

開啟gzip壓縮

具體的做法非常簡單，隻需要你在你的 request headers 中加上這麼一句：

壓縮 gzip，服務端要花時間；解壓 gzip，浏覽器要花時間。中間節省出來的傳輸時間，真的那麼可觀嗎？

答案是肯定的。如果你手上的項目是 1k、2k 的小檔案，那确實有點高射炮打蚊子的意思，不值當。但更多的時候，我們處理的都是具備一定規模的項目檔案。實踐證明，這種情況下壓縮和解壓帶來的時間開銷相對于傳輸過程中節省下的時間開銷來說，可以說是微不足道的

既然存在着這樣的交換，那麼就要求我們學會權衡。伺服器的 cpu 性能不是無限的，如果存在大量的壓縮需求，伺服器也扛不住的。伺服器一旦是以慢下來了，使用者還是要等。webpack 中 gzip 壓縮操作的存在，事實上就是為了在建構過程中去做一部分伺服器的工作，為伺服器分壓。

開發環境的配置

優化

提取css為單獨檔案(minicssextractplugin), css相容性處理(postcss-loader'), css壓縮(optimizecssassetswebpackplugin)

js文法檢測(eslint), js相容性處理(bable), js壓縮(生産模式預設壓縮js代碼) //同一個比對規則，需要指定先後順序，比如優先度eslint&gt;bable

html壓縮(htmlwebpackplugin)

hmr

source-map(devtool: 'eval-source-map')

緩存

tree-shaking(optimizecssassetswebpackplugin)

code split

lazy loading

pwa

多程序打包

externals

optimization