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

時間 2019-11-17

標籤使用 web 應用打包工具 parcel 實現代碼分割欄目 HTML 简体版

原文原文鏈接

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

原文做者：Ankush Chatterjee

譯文出自：掘金翻譯計劃

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

譯者：kk

校對者：noahziheng pot-code

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

什麼是代碼分割？

若是你對它很熟悉，那麼你能夠跳過這部分。否則的話，仍是接着往下看吧。前端

若是你使用過 JavaScript 框架進行前端開發的話，那麼最後確定會打包成一個很大的 JavaScript 文件。可能由於你寫的應用比較複雜，有不少模塊之類，總之，這些包都太大了。文件一大，下載的時間就越長，在帶寬較低的網絡環境下問題尤其顯著。因此，請仔細斟酌一下：用戶是否真的須要一次性加載全部的功能？android

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

若是這樣作的話，那對用戶太不公平了！若是咱們只加載用戶須要的那部分代碼，是否是特別贊？ios

因此，這種把比較大的包拆分紅多個更小的包的方法就是代碼分割。這些更小的包能夠按需或者異步加載。雖然聽上去很難實現，可是像 webpack 這種現代打包工具就能幫你作這件事，而 parcel 使用起來更加簡單。git

文件拆分紅了這些可愛的小 baby 們。來自 Shreya [Instagram]github

Parcel 究竟是什麼呢？

Parcel 是一個web

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

它使得模塊打包變得十分簡單！若是你還不知道 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 便可，它會自動完成全部的配置工做！