Parcel 實現程式碼分割 -- 初識 Parcel
阿新 • • 發佈：2019-01-26
程式碼分割
使用 JavaScript 進行前端開發，如果不進行程式碼分割，最後會打包成一個很大的 JS 檔案。大檔案的下載時間就會比較長，而使用者有可能並不需要一次性載入所有的功能，完全沒有必要下載這麼大的檔案。
所以，很有必要將較大的 JS 包拆分成多個更小的包，也就是程式碼分割。這些小包可以按需或一步載入。之前我們使用 webpack 就能做到，parcel 使用起來則更加簡單。
Parcel
Parcel 是一個極速零配置 web 應用打包工具。
下面這個栗子展示瞭如何使用 Parcel：
首先，檔案目錄：
index.html
index.js
package.json 這個例子中，只在 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 someModule：
console.log("someModule.js loaded");
module.exports = {
render : function(element) index：
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 即可
parcel index.htmlsomeModule 將會在按鈕被點選之後才被載入。