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

秒速五厘米 2022-06-01 09:06 155阅读 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 将会在按钮被点击之后才被加载。