使用 web 應用打包工具 Parcel 實現程式碼分割

心豈發表於2019-02-27

原文地址：Code Splitting with Parcel Web App Bundler

原文作者：Ankush Chatterjee

譯文出自：掘金翻譯計劃

本文永久連結：github.com/xitu/gold-m…

譯者：kk

校對者：noahziheng pot-code

程式碼分割可謂是當今 web 開發中很熱門的話題。今天，我們將探索如何使用 parcel 輕鬆地實現程式碼分割。

什麼是程式碼分割？

如果你對它很熟悉，那麼你可以跳過這部分。不然的話，還是接著往下看吧。

如果你使用過 JavaScript 框架進行前端開發的話，那麼最後肯定會打包成一個很大的 JavaScript 檔案。可能因為你寫的應用比較複雜，有很多模組之類，總之，這些包都太大了。檔案一大，下載的時間就越長，在頻寬較低的網路環境下問題尤為顯著。所以，請仔細斟酌一下：使用者是否真的需要一次性載入所有的功能？

想象有這麼一個電子商務的單頁面應用。使用者登入進來能只是想看一下產品清單，但是他已經花了很長時間，下載到的 JavaScript 不僅僅是渲染產品那部分，還渲染了過濾、產品詳情、供貨等等等等。

如果這樣做的話，那對使用者太不公平了！如果我們只載入使用者需要的那部分程式碼，是不是特別贊？

所以，這種把比較大的包拆分成多個更小的包的方法就是程式碼分割。這些更小的包可以按需或者非同步載入。雖然聽上去很難實現，但是像 webpack 這種現代打包工具就能幫你做這件事，而 parcel 使用起來更加簡單。

檔案拆分成了這些可愛的小 baby 們。來自 Shreya [Instagram]

Parcel 到底是什麼呢？

Parcel 是一個

極速零配置 web 應用打包工具

它使得模組打包變得十分簡單！如果你還不知道 Parcel，推薦你先看一下 Indrek Lasn 寫的這篇文章。

開始吧！

嗯...程式碼部分，我不會使用任何框架，用不用框架並不影響操作。下面例子會用非常簡單的程式碼展示如何拆分程式碼。

建立一個新的資料夾， 初始化 一個專案：

npm init
複製程式碼

或者，

yarn init
複製程式碼

選擇你喜歡的方式（yarn 是我的菜 ?），然後按照下圖建立一些檔案。

世界上最簡單的結構有沒有？

這個例子中，我們只在 index.html 中引入 index.js 檔案，然後通過一個事件（這個例子中我們使用點選按鈕）載入 someModule.js 檔案，並用它裡面的方法來渲染一些內容。

開啟 index.html 新增如下程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Code Splitting like Humans</title>
  </head>
  <body>
    <button id="bt">Click</button>
    <div class="holder"></div>
    <script src="./index.js"></script>
  </body>
</html>
複製程式碼

例子很簡單，只是一個 HTML 模板，包括一個 button 按鈕和渲染 someModule.js 內容的 div。

接著我們來寫 someModule 檔案：

console.log("someModule.js loaded");
module.exports = {
  render : function(element){
      element.innerHTML = "You clicked a button";
  }
}
複製程式碼

我們 export 了一個物件，它有一個 render 方法，接收一個元素並將「You clicked a button」渲染到這個元素內部。

現在有意思了。在我們的 index.js 中，我們要處理 button 按鈕的點選事件，動態的載入 someModule。

對於動態的非同步載入，我們使用 import() 語法，它會按需非同步載入一個模組。

看一下如何使用，

import('./path/to/module').then(function(page){
//Do Something
});
複製程式碼

因為 import 是非同步的，所以我們用 then 來處理它返回的 promise 物件。在 then 方法中，我們傳入一個函式，這個函式接收從該模組載入進來的物件。這和 const page = require('./path/to/module'); 很相似，只是動態非同步執行而已。

在我們的例子中這麼寫，

import('./someModule').then(function (page) {
   page.render(document.querySelector(".holder"));
});
複製程式碼

於是我們載入了 someModule 並呼叫了它的 render 方法。

接著把它加到按鈕點選事件的監聽函式中。

console.log("index.js loaded");
window.onload = function(){
       document.querySelector("#bt").addEventListener('click',function(evt){
     console.log("Button Clicked");
     import('./someModule').then(function (page) {
         page.render(document.querySelector(".holder"));
     });
});
}
複製程式碼

至此程式碼已經寫完了，接下來只需要執行 parcel 即可，它會自動完成所有的配置工作！