使用 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 便可，它会自动完成全部的配置工做！

parcel index.html
复制代码

它会产生如下的文件。

在你的浏览器中运行，观察结果。

控制台输出

网络活动记录

能够从控制台输出看到，someModule 在按钮被点击以后才被加载。经过 network 能够看到调用 import 后，codesplit-parcel.js 是如何加载模块的。

代码分割是多么神奇的一件事，既然咱们能够这么简单的实现，那咱们还有理由不用吗？💞💞

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。