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

本文提供了按需加载了几种思路,并给出了相应实践。原文地址

为了探究按需加载的本质,选择了对先前造的轮子 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 代码

值得阅读的文章

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏orientlu

叙述 C语言编译

工作原因有时候会用python写写测试工具,感受到其快速实现应用的便利,但由于偏底层开发,主力语言依然是C。对于开发语言没有什么优劣概念,在特定的情景下哪种实现...

1751
来自专栏烙馅饼喽的技术分享

用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- Demo分析

如何创建工程 下载最新的Unity发布插件包。 打开Unity,新建一个项目 将插件包导入 ? 在菜单中点击ASRuntime/Create ActionScr...

34110
来自专栏CSDN技术头条

如何在JavaScript中处理大量数据

在几年之前,开发人员不会去考虑在服务端之外处理大量的数据。现在这种观念已经改变了,很多Ajax程序需要在客户端和服务器端传输大量的数据。此外,更新DOM节点的处...

1849
来自专栏腾讯移动品质中心TMQ的专栏

手机APP安装包缩减方案

安装包大小对于产品很重要 主要有如下几个原因: 1、手机APP安装包的大小会影响用户是否愿意花费流量来下载此APP; 2、包体越大下载过程越长,用户取消下载的可...

2886
来自专栏容器云生态

运维工作常用的shell命令

#seq 1 100    //1到100排序 #seq 1 3 100   //1到100排序,间隔为3 shell中的变量设置规则: 1.变量与变量的内容用...

2166
来自专栏斑斓

Redux框架reducer对状态的处理

前言 在react+redux项目里,关于reducer处理state的方式,在redux官方文档中有这样一段描述: 不要修改 state。 使用 Objec...

3715
来自专栏数据结构笔记

实战:异步爬取之异步的简单使用

首先,对于少量的请求(几百)我们不推荐使用异步,一般是成千上万的请求我们才使用异步,比如说爬取全站。

1352
来自专栏大内老A

使命必达: 深入剖析WCF的可靠会话[编程篇](下)

整个可靠会话的机制是完全在信道层实现的,而整个信道层的最终缔造者就是绑定,所以可靠会话编程是围绕着绑定进行的。《上篇》对实现可靠会话的绑定元素已经如何使用系统绑...

1897
来自专栏Python中文社区

Python云计算框架:OpenStack源码分析之RabbitMQ(二)

之前发布的文章因为在编辑后代码部分在手机上看不清已被及时删除,本文重新编辑好之后再发布一次,带来不便请谅解! 專 欄 ❈ ZZR,Python中文社区专栏作者...

2999
来自专栏CSDN技术头条

Java 9的14个新特性总结

Java 9 包含了丰富的特性集。虽然Java 9没有新的语言概念,但是有开发者感兴趣的新的API和诊断命令。 我们将快速的,着重的浏览其中的几个新特性: ? ...

2135

扫码关注云+社区

领取腾讯云代金券