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

Alfred 发布于2019-08-23 11:52 / 2229人阅读

摘要：原文地址为了探究按需加载的本质，选择了对先前造的轮子进行实验。下文就来揭开面纱，并动手改造项目，最终目标是用第二种写法实现按需加载，减小打包体积。下面给出种可以按需加载的方案。

原文地址

为了探究按需加载的本质，选择了对先前造的轮子 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执行机制中探讨，这里先不展开了。

云服务器 GPU云服务器阿里云的服务器是自己造的吗按需加载按需加载javascript webpack按需加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97598.html

一年前端造的轮子是什么样子？

摘要：起因工作也差不多满一年了，对于基本的业务开发有了一些自己的想法刚开始工作的前个月，每天都可以接触到新东西，接触新业务个月之后业务开发熟悉了对于自己的技术成长就感觉受到了局限如果一直没有作出改变，那么等于是个月的经验要用一年我的学习方式就是多起因工作也差不多满一年了，对于基本的业务开发有了一些自己的想法刚开始工作的前3个月，每天都可以接触到新东西，接触新业务 3个月之后业务开发熟...

szysky 2019-08-23 16:53 评论0 收藏0
十年铲码，八大体系超千篇数百万字技术笔记系列汇总（GitBook 悦享版）

摘要：十年铲码，八大体系超千篇数百万字技术笔记系列汇总悦享版十年铲码两茫茫，纵思量，却易忘不觉笔者步入程序员已有十年。十年之期，正巧笔者从阿里离开，重回打印制造业的怀抱，希望能依托于设备优势逐步真正构建分布式制造网络。 showImg(https://segmentfault.com/img/remote/1460000020151971); 十年铲码，八大体系超千篇数百万字技术笔记系列汇总...

Ashin 2019-08-26 10:56 评论0 收藏0
那些年造的轮子，我们该为谁树墓碑？

摘要：为此，玉伯当时还特意发了一条微博，说是应该给和也树一块墓碑了。这里，闰土所说的过时，并不是指它现在就不能用了，而是说出现了明显更加先进的理念或者标准，这会导致未来它的使用场景大为减少，整体趋势已经步入衰落。 showImg(https://segmentfault.com/img/bVYQLf?w=700&h=392); 前言都已经2017年的11月份了，我们项目还打算用seajs？...

vspiders 2019-08-21 17:42 评论0 收藏0
组件复用那些事儿 - React 实现按需加载轮子

摘要：同时，懒加载按需加载概念至关重要。时至今日，这些实现懒加载脚本的代码仍有学习意义。代码实战下面让我们动手实现一个按需加载轮子。同样，对于组件也可以使用无状态组件函数式组件实现这样无疑更加简洁。组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 React、Vue 等对此概念都倍加推崇。确实，组件化复用性（reusability）和模块性（modularization...

lidashuang 2019-08-22 16:24 评论0 收藏0