程式碼捆綁
我很早就寫過幾個關於 Javascript 指令碼的捆綁的帖子，人們可能認為我是瘋狂的熱衷於應用捆綁，但是我認為我是情不自禁的，因為它是非常有趣的:-)。
有幾篇我寫的文章是關於實現最小可能的捆綁的，其中我關注最多的是單檔案的捆綁並且會嘗試將檔案的大小變得很小。其中一個例子是我的 Angular 捆綁郵件。
程式碼分割
一切都還不錯，直到有一天遇到不能以單檔案形式下載整個應用的情況。有時候你必須在應用程式中使用多個打包的指令碼。
這就是需要對程式碼進行分割的地方。通過將應用程式拆解成多個部分，你才可以按照使用者當前操作提供應用程式中相關的部分。
提到最小的單包，Webpack 通常最後來處理檔案大小，但這往往不是恰當的時機。Rollup 在這方面就好得多，但它對程式碼分割的支援則較弱。
Webpack 各分塊檔案的大小總和會超出單個 Rollup 打包出來的檔案的大小，但這在你的應用中很可能不是什麼問題。
如果你根據需求來對 Webpack 產生和各個包進行懶載入，那麼使用者最終下載的內容可能只是完整 Rollup 生成的包檔案的一部分。
最終，更小更有針對性的打包會比單包給使用者帶來更多好處。當然如果你的應用中沒什麼機會用以懶載入，這些好處就不存在。
允許程式碼分割
下面的章節中我會展示如何以最簡單的方式配置程式碼分割。我會把程式碼分割為兩個應用包以及一個包含公共程式碼的庫包。
下面是原始碼：
car-service.js
|
1 2 3 4 5 6 7 8 9 10 |
import { LoggerService } from './logger-service'; export class CarService { constructor() { this.logger = new LoggerService(); } getCar() { this.logger.logMessage('getting car'); return 'BMW'; } } |
person-service.js
|
1 2 3 4 5 6 7 8 9 10 |
import { LoggerService } from './logger-service'; export class PersonService { constructor() { this.logger = new LoggerService(); } getPerson() { this.logger.logMessage('getting person'); return 'Joe Smith'; } } |
logger-service.js
|
1 2 3 4 5 |
export class LoggerService { logMessage(msg) { console.log(msg); } } |
CarService 和 PersonService 會被分割到兩個不同的應用包中，公共的 LoggerService 會被提取到一個共享包中。
配置
我聽某些開發者說，Webpack 配置起來很難。我認為這是很多人一般不選擇用 Webpack 來打包的原因之一，這也確實是 Webpack 存在的問題。新術語和模組格式可能就是入門的難點所在，但我相信人們會很快克服它們。尤其是在人們認識到優化打包優點的時候。
實際上對 Webpack 進行基本的配置是很簡單的。我這個例子就是很基礎，你可以很容易對其進行擴充套件，進行更高階的設定。
webpack-config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var path = require('path');const webpack = require('webpack'); module.exports = { entry : { person: './src/code-splitting-webpack/person-service.js', car: './src/code-splitting-webpack/car-service.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, '../../dist') }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'lib', minChunks: 2, filename: '[name].js', }) ] } |
我的配置中首先定義了 entry.person 和 entry.car，它們是我那些包的分割點。有了這個配置，就可以生成兩個不同的應用包了。包名由 [name].bundle.js 規則來生成，[name] 在這裡是一個佔位符，它會被替換為 “car” 和 “person”。
如果配置到這裡就結束，最終會得到兩個包含完整應用程式功能的包。這是因為兩個包中會有一些重複的東西來自共用的 LoggerService。預設情況下 LoggerSerivce 會被新增到兩個包中。
CommonsChunkPlugin 可以解決這個問題。它會讓 Webpack 將所有包中共用的公共程式碼拆分出來形成第三個包。
這個例子中的共享包非常簡單，不過你可能不想在共享包中包含所有重複的程式碼。注意到 minChunks 配置項，這個配置項允許你指定要加入共享包的程式碼需要被重複使用的最小次數。
我把程式碼釋出在 Github 上，如果你有興趣可以取下來看看。
可以通過下面的 Webpack 命令來執行示例：
|
1 |
webpack --config webpack.config.js --progress |
如果你喜歡這篇文章，請推薦給你的朋友。