结合自己造的轮子实践按需加载

为了探究按需加载的本质,选择了对先前造的轮子 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 执行三部曲如下:

解析

使用 babel-parse 将 JS 代码解析成 AST 树

转换

配合 babel-traverse 进行 AST 树的遍历,同时使用 babel-core 对外暴露的 transform 来调用相应插件来转化 AST 树

babal.transform(code, { plugins: { pluginA, pluginB } })

生成

使用 babel-generator 将 AST 树转换回 JS 代码

值得阅读的文章

babel 中文官网

剖析 Babel —— Babel 总览,这篇文章讲得比较透彻

babel-handbook,babel 手册,推荐

Babel 插件开发一些示例,这篇文章 bug 比较多,可以作为上面文章的补充

,可以在这个网站上看到 JS 代码对应的 AST

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpgpwz.html