使用 web 应用打包工具 Parcel 实现代码分割

使用 web 应用打包工具 Parcel 实现代码分割

技术杂谈小彩虹2021-07-15 4:48:3250A+A-

代码分割可谓是当今 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 即可,它会自动完成所有的配置工作!

parcel index.html

它会产生以下的文件。

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

控制台输出

网络活动记录

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

代码分割是多么神奇的一件事,既然我们可以这么简单的实现,那我们还有理由不用吗?


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

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们