Parcel 实现代码分割 -- 初识 Parcel

最新推荐文章于 2021-03-29 17:03:25 发布

玉儿Qi

最新推荐文章于 2021-03-29 17:03:25 发布

阅读量745

点赞数

分类专栏：前端开发文章标签： Parcel

前端开发专栏收录该内容

227 篇文章 0 订阅

订阅专栏

代码分割

使用 JavaScript 进行前端开发，如果不进行代码分割，最后会打包成一个很大的 JS 文件。大文件的下载时间就会比较长，而用户有可能并不需要一次性加载所有的功能，完全没有必要下载这么大的文件。

所以，很有必要将较大的 JS 包拆分成多个更小的包，也就是代码分割。这些小包可以按需或一步加载。之前我们使用 webpack 就能做到，parcel 使用起来则更加简单。

Parcel

Parcel 是一个极速零配置 web 应用打包工具。

下面这个栗子展示了如何使用 Parcel：

首先，文件目录：

index.html
index.js
package.json
someModule.js

这个例子中，只在 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>

someModule：

console.log("someModule.js loaded");
module.exports = {
  render : function(element){
      element.innerHTML = "You clicked a button";
  }
}

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.html

someModule 将会在按钮被点击之后才被加载。

玉儿Qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Parcel 实现代码分割 -- 初识 Parcel

代码分割使用 JavaScript 进行前端开发，如果不进行代码分割，最后会打包成一个很大的 JS 文件。大文件的下载时间就会比较长，而用户有可能并不需要一次性加载所有的功能，完全没有必要下载这么大的文件。所以，很有必要将较大的 JS 包拆分成多个更小的包，也就是代码分割。这些小包可以按需或一步加载。之前我们使用 webpack 就能做到，parcel 使用起来则更加简单。Parcel
复制链接

扫一扫