Webpack 打包優化之體積篇

談及如今欣欣向榮的前端圈，不僅有各類框架百花齊放，如vue，react，angular等等，就打包工具而言，發展也是如火如荼，百家爭鳴；從早期的王者browserify,grunt，到後來贏得寶座的gulp， 以及獨樹一幟的fis3, 以及下一代打包神器rollup；在 browserify,grunt,gulp,rollup,webpack 可以一窺其中部分對比。在本文要**的是，當前打包工具絕對霸者webpack。

原文webpack package optimization

webpack，當前各大主流框架預設配備的打包方案，對其如何使用，已有較完備中英文文件；並且，各主流框架也有對應cli予以基礎配置，故不作為**範疇。從產品層來講，如何使得構建的包體積小、執行快，這有必要不斷摸索實踐，提煉公升級，使之臻於最佳。本文將從以下些許方面，對webpack打包體積方面，做下優化**(備註：webpack實踐版本：3.3.0)：

這裡推薦使用 webpack-bundle-analyzer —— webpack 外掛程式和 cli 實用程式，她可以將內容束展示為方便互動的直觀樹狀圖，讓你明白你所構建包中真正引入的內容；我們可以借助她，發現它大體有哪些模組組成，找到不合時宜的存在，然後優化它。我們可以在 專案的 package.json 檔案中注入如下命令，以方便執行她(npm run analyz)，缺省會開啟  作為展示。

當然，同型別的還有 webpack-chart 以及 webpack-analyse，這兩個站點也是以可視方式呈現構造的元件，可以讓你清楚的看到模組的組成部分；不過稍顯麻煩的是，你需要執行以下命令，生成工具分析所需要的 json 檔案：

1

2     
3     
4     

webpack --profile --json > stats.json

// 如果，執行指定的 weboack 檔案，可用此命令
webpack --config build/webpack.prod.conf.js  --profile --json > stats.json

webpack打包體積優化

這個外掛程式可以直觀展示打包之後，每個包的大小，分析出是否重複打包了某個模組。專案中我們通過cdn引入了某個庫，但是又不想這個庫被打包到webpack最終模組中，我們可以使用externals externals webpack4中production模式下會自動開啟tree shaking模式，但...

webpack 與 vue 打包體積優化

在使用vue開發時，遇到打包後單個檔案太大，因而需要分包，不然載入時間太久。雖然盡可能減少請求次數，但是單個包太大也不是好事 entry 需要以實際場景考慮。頁面按需載入，會把不同頁面區分到不同的js檔案中，訪問相應頁面時才載入這些js。但實際這些檔案的體積相加比不分開更大。js 方法1 prev ...

Webpack 打包優化之速度篇

在前文 webpack 打包優化之體積篇中，對如何減小webpack打包體積，做了些 當然，那些法子對於打包速度的提公升，也是大有裨益。然而，打包速度之於開發體驗和及時構建，相當重要 所以有必要對其做更為深入的研究，以便完善工作流，這就是本文存在的緣由。在使用實際專案開發中，為了提公升開發效率，很明...