使用 web 应用打包工具 Parcel 实现代码分割-CSDN博客

原文地址：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 即可，它会自动完成所有的配置工作！