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 大的原因
這裡推薦使用 webpack-bundle-analyzer —— Webpack 外掛和 CLI 實用程式，她可以將內容束展示為方便互動的直觀樹狀圖，讓你明白你所構建包中真正引入的內容；我們可以藉助她，發現它大體有哪些模組組成，找到不合時宜的存在，然後優化它。我們可以在
專案的 package.json 檔案中注入如下命令，以方便執行她(npm run analyz
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”
webpack-bundle-analyzer
當然，同類型的還有 webpack-chart 以及 webpack-analyse，這兩個站點也是以可視方式呈現構造的元件，可以讓你清楚的看到模組的組成部分；不過稍顯麻煩的是，你需要執行以下命令，生成工具分析所需要的 json 檔案：
| 1234 | webpack --profile --json > stats.json// 如果，執行指定的 weboack 檔案，可用此命令webpack --config build/webpack.prod.conf.js --profile --json > stats.json |
引入 DllPlugin 和 DllReferencePlugin
DllPlugin 和 DllReferencePlugin 提供了以大幅度提高構建時間效能的方式拆分軟體包的方法。其中原理是，將特定的第三方NPM包模組提前構建