结合自己造的轮子实践按需加载
本文提供了按需加载了几种思路,并给出了相应实践。原文地址
为了探究按需加载的本质,选择了对先前造的轮子 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 比较多,可以作为上面文章的补充
- AST explore,可以在这个网站上看到 JS 代码对应的 AST
转载于:https://www.cnblogs.com/MuYunyun/p/9615455.html
结合自己造的轮子实践按需加载相关推荐
- webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载)
为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等. 总之,就是在SPA,把JS代码分成N个页 ...
- 按需加载图片(图片懒加载)
前言 按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量.对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少. 原理 ...
- webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载)
为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等. 总之,就是在SPA,把JS代码分成N个页 ...
- echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语 近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...
- iOS和tvOS游戏按需加载资源简介
2019独角兽企业重金招聘Python工程师标准>>> 戴维营教育翻译:感谢Davis Allie的An Introduction to On-Demand Resources on ...
- vue按需加载组件-webpack require.ensure(转)
vue按需加载组件-webpack require.ensure 2017年07月28日 09:58:07 A_山水子农 阅读数:23245 标签: vue按需加载组件按需加载webpackrequi ...
- 前端基础建设与架构10 代码拆分和按需加载:缩减 bundle size,把性能做到极致
这一讲,我们将对代码拆分和按需加载这一话题进行解析. 随着 Webpack 等构建工具的能力越来越强,开发者在构建阶段可以随心所欲打造项目流程,代码拆分和按需加载技术在业界曝光量也越来越高.事实上,代 ...
- AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
- react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)...
react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFil ...
最新文章
- Exchange笔记之使用OWA加密访问邮箱
- Firefox 多版本共存
- BEM 实战之微信个人页面
- 交换机短路_融商通达变频器功率模块短路维修故障案例
- 使用Apache Camel发布/订阅模式
- 2013年5月7日---JS中的正则
- Rmarkdown与Rnotebook使用心得
- 大数据的5个“小观点 ”(转)
- 实现审批系统_我市工程建设项目审批系统实现与 省监管平台数据互联互通
- 一个Keil工程包含的内容
- cuda驱动更新方法之一:
- 《MarkDown编辑器的使用技巧(修改录入方式与目录生成)|CSDN编辑器测评》
- 什么是栈,栈及其特点和应用详解
- php将ppt转jpg图片的具体步骤代码
- python微信自动聊天小工具
- 探索人群客单价差异的显著性,使用SPSS就能轻松做到
- 好看的滚动条样式,css实现好看的滚动条样式
- linux上namd使用教程,NAMD自学笔记 适用于初学者
- 99%的人都想要的广告拦截软件
- 计算机水平熟悉情况,计算机水平如何填
热门文章
- Android application捕获崩溃异常
- web主题公园版权信息破解:script.js加密文件
- FormShortCut MainForm 和 二级FORM
- php 对接中国天气网 城市 id json串
- SRM144 DIV2 1100
- 100题_22 整数的二进制表示中1的个数
- linux memcached 的安装
- 问题和任务包003.使用报告.数据可视化.PowerBI.微软的新武器
- CodeBlocks: 生成的exe文件自定义一个图标
- 【leetcode】Intersection of Two Linked Lists