阅读目录(Content)
- 实验一：全量引用
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里进行如下配置:
![](upload/201809101126234435.png") 20px 0px no-repeat rgb(252, 250, 169); box-shadow: rgb(170, 170, 170) 0px 0px 8px;)
