模块化和Lazy Loading 的简单集成

2023-09-02 15:51:35

当JavaScript逐渐成熟，模块化和按需加载变得更加流行。相比单一的长文件，将大型应用程序拆分为更小的模块，使其更易维护和理解。其中，模块化可以显著提升开发效率，而按需加载又可以加快网络资源请求的速度，这些共同推动了整个行业技术的发展。

如果您需要将许多JavaScript模块加载到网页中，通常的做法是创建一个<script>标签，然后将所有模块的URL都包含在其中。这会使得HTML文件和页面的加载速度都会变得十分缓慢。更糟糕的是，其中一些可能根本不会被使用。这时，使用类似ConditionerJS这样的库，可以实现对这些资源的按需加载，只需要短短几行代码即可完成。

ConditionerJS是一款轻量级库，方便JavaScript代码的按需加载，它可以通过服务端渲染和客户端动态注入两种方式在 HTML 页面中异步加载 JS 模块。服务端渲染的方式适用于具有 CSR 特性的应用，开发者可以将 JS 脚本的内容直接内嵌在 HTML 页面中，并在 DOMContentLoaded 和 load 事件之后，将 <script> 标签从 HTML 页面中移除，以此实现按需加载的功能。

那么，应该怎么用代码来实现按需加载呢？首先，我们来创建一个名为app.js的模块，代码如下：

// app.js
import { add } from './math.js';

console.log('hello from app.js');
console.log(add(1, 2));

这是一个简单的模块，它从另一个名为math.js的模块中导入了一个add函数，并将其打印到控制台中。

接下来，我们创建一个名为math.js的模块，代码如下：

// math.js
export function add(a, b) {
  return a + b;
}

这是一个简单的模块，它导出了一个add函数，该函数接受两个参数并返回它们的和。

最后，我们创建一个名为index.html的HTML文件，代码如下：

<!DOCTYPE html>
<html>
  <head>
    
    <script src="conditioner.min.js"></script>
    <script>
      conditioner.config({
        baseUrl: './',
        paths: {
          app: 'app.js',
          math: 'math.js'
        }
      });

      conditioner.load('app');
    </script>
  </head>
  <body>
    <h1>ConditionerJS Demo</h1>
  </body>
</html>