结合本身造的轮子实践按需加载

原文地址

为了探究按需加载的本质，选择了对先前造的轮子 diana 进行实验。

实验一：全量引用

import * as _ from 'diana'

打包体积结果以下：

测试的是 diana 0.4.1

实验二：部分引用

import { equal } from 'diana'

打包体积结果以下：

通过测试，发现两种方式打包后的体积都为 21 k，第二种方式仍然将整个包引入项目中了。但是 lodash 就是这么玩的呀，这和说好的不同呀，难道是忽视了什么细节么。

下文就来揭开面纱，并动手改造项目，最终目标是用第二种写法实现按需加载，减少打包体积。

按需加载的方案

按需加载的效果是最终打包的代码里没有未引入的模块，从而优化项目体积。下面给出 3 种能够按需加载的方案。

给每一个函数单独发布 npm 模块

按需加载的方案一是将每一个函数都单独发布一个包，能够在 npm 上查阅 lodash，这种引用方式以下：

import { isEqual } from 'lodash.isequal'

每个函数都做为一个单一的模块导出

按需加载的方案二是将每个函数都做为一个单一的模块导出，参照这种思路将 diana 的每一个函数暴露在 lib 目录下，部分截图以下：

这时候再来测试下打包体积：

import equal from 'diana/lib/equal'

打包体积结果以下：

能够看到打包体积减少约为原来的 1/7 了，可是这种方案在写法上过于冗长，那要不借助下 babel ？

方案二 + babel

方案三是在方案二的基础上借助 babel 插件后，写法能够以下:

import { equal } from 'diana'

在 .babelrc 里进行以下配置:

// .babelrc
{
  "plugins": [
    ["on-demand-loading", {"library": "diana"}]
  ]
}

此时打包体积以下：

实际上，babel 插件 的做用是将 import { equal } from 'diana' 编译成 import equal from 'diana/lib/equal'。

关于 babel 插件执行机制，能够在babel执行机制中探讨，这里先不展开了。