Webpack 構建後文件變得很大？

上一篇回顧使用 Webpack 的動機，比較理論，本篇側重實用。

這幾篇文章的前提是 Webpack 已經入門。若無，請自行到 Webpack 官方網站的 getting start 按指引一步步實操。

啃先生(MrKenniu) | 文

使用 Webpack 打包，前端工程師能夠按 CommonJS 或 ES6 Module 的規範寫前端 JS 代碼，使模塊源代碼看起來跟後端代碼同樣簡潔，可是，很快發現文件太大（尤爲基於 React 進行開發的應用，若是是單頁面程序？更大了），爲了解決問題，如下是我每次必用的策略：

• 按需加載 「 Code Split 」

• 提取公共代碼 「 CommonsChunkPlugin 」

• 第三方庫分開打包 「 DllPlugin 」

• 代碼壓縮「 UglifyJSPlugin 」

本篇總結 按需加載 的用法

Code Split 概念

Webpack 支持多種模塊加載方式。CommonJS 的 require 和 ES6 的 import 是同步加載的，經過這些方式引入的依賴會被 Webpack 打包在一塊兒，文件於是變大。而 AMD 或 CommonJS 的 require.ensure 是按需加載「異步的」，對於一些能夠延遲加載的模塊「依賴」，應該用這種方式，從而避免文件太大。

同步加載的模塊被打包在同一個 chunk 「 一個 chunk 是一個 JS 文件，由一個或若干個模塊組成 」，而經過異步加載的模塊被打包在另外的 chunk 裏，Webpack 以此來進行分片，即 Code split。

Code Split 的方式

• AMD : require

• CommonJS : require.ensure

• ES : System.import

chunk 的內容組成

經過 Code Split 分片，新的 chunk 由異步模塊和這些模塊的依賴構成。這些模塊的依賴按一樣的規則構建，即同步加載的模塊打包在同一個 chunk，異步加載的模塊被切分到新的 chunk。具體看下面的例子，請注意看代碼註釋的內容，build 目錄裏的三個文件是 Webpack 打包最終生成的。

Code Split 優化

從上面的例子可見，Code Split 分出來了兩個 chunk，即 1.bundle 和 2.bundle，從而減少了主 chunk bundle.js 的文件大小，減輕程序初始化的網絡等待。然而，新的問題出現了，1.bundle 和 2.bundle 都包含 io 模塊，可見 io 模塊有冗餘。帶着這個問題，下一篇總結 CommonsChunkPlugin 的使用

歡迎關注個人公衆號