在现代 web 开发中，前端的主要职责之一是保证网页的响应速度。而将 JavaScript 代码按需加载，可以显著缩短网页的加载时间，提升用户体验。micro-requirejs 是一个基于 RequireJS 开发的轻量级的 AMD 模块加载器，它可以帮助开发者实现 JavaScript 代码按需加载的功能。在这篇文章中，我们将会介绍如何安装、配置、使用 micro-requirejs，以及它的进一步优化。
安装
首先，在使用 micro-requirejs 之前需要安装 Node.js。如果已经安装 Node.js，可以通过 npm 安装 micro-requirejs：
$ npm install micro-requirejs
或者直接在浏览器中引用如下链接：
<script src="https://unpkg.com/micro-requirejs"></script>
配置
将 micro-requirejs 引入到项目中后，我们需要进行初始配置。它提供了一个全局变量 require，它的作用类似于 Node.js 中的 require。在 require 的基础上，micro-requirejs 提供了更加丰富和灵活的配置选项，以满足不同的使用场景。
配置基本信息
在使用 micro-requirejs 之前，我们必须通过配置选项告诉它我们的项目的基本信息，包括 baseUrl、paths、shim 等等。其中 baseUrl 表示项目根目录，为一个 URL，它是该应用的根路径。paths 和 shim 分别用于配置文件路径和依赖库，用法如下：
-- -------------------- ---- -------
----------------
-------- -----
------ -
--------- ------------------------------------------------------------
------ ------------------------------------------------------
--
----- -
--------- -
-------- ---
-
-
--其中，我们通过 baseUrl 指定了项目的根路径，paths 指定了依赖文件的路径以及依赖库的 CDN，而 shim 允许我们在没有使用 AMD 或者 ES6 的依赖库中依然可以使用 require。
使用模块
在配置完成后，我们可以通过 require 加载模块。不同于 ES6 的 import 或者 require.js 的 require，micro-requirejs 的 require 是 AMD 规范下的一个函数。你可以传入一个数组作为参数，来指定该模块所依赖的其他模块，最后再传入一个回调函数作为载入成功时的回调：
require(['jquery', 'vue'], function ($, Vue) {
console.log($, Vue)
})这里我们首先定义了所依赖的文件，接着传递的回调函数就会在依赖文件加载完成后执行。在回调函数中可以拿到依赖引入的变量，正如示例代码所写的一样。
异步加载
micro-requirejs 可以延迟加载脚本，在需要的时候才下载和执行它。在 AMD 语法中使用 define 和 require 两个函数可以实现异步加载。在 micro-requirejs 中，define 方法允许我们自定义模块，它的最基本的使用方法如下：
define(function () {
return {
foo: function () {
console.log('Hello world!')
}
}
})在异步加载模块时需要用到这个语法，例如：
require(['./modules/hello'], function (hello) {
console.log(hello.foo())
})进一步优化
micro-requirejs 在加载 JavaScript 模块时，内部通过 XMLHttpRequest 请求文件，将数据解析成 JavaScript 代码，然后执行这些代码。这个过程比较耗时，同时对于每个模块都会发送一个请求，会对性能产生较大的影响。为了进一步优化性能，我们可以采用 requirejs 的插件 r.js 进行打包和优化。
R.js 可以将多个 JavaScript 模块打包成一个文件，降低 HTTP 请求次数，同时也可以压缩代码，减小文件大小。使用 R.js 进行打包的时候，需要在项目的根目录下新建一个配置文件：
{
baseUrl: 'src/js',
name: 'main',
out: 'dist/bundle.js'
}其中，baseUrl 和 name 分别表示项目根目录和打包入口文件，out 表示打包输出文件。打包完成后，只需要引入优化后的文件即可：
<script src="dist/bundle.js"></script>
总结
micro-requirejs 是一个基于 RequireJS 开发的轻量级的 AMD 模块加载器，可以帮助开发者实现 JavaScript 代码按需加载的功能。通过对于 micro-requirejs 的基本信息配置与使用模块进行了详细的介绍，我们可以在项目中更好地应用它。同时，如果需要进一步提高性能，可以使用 requirejs 插件 r.js 进行打包和生产优化后的 JavaScript 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f481d8e776d0804116b