按需加载

在使用 lodash 的时候我们可以使用这样的代码

//一
import {omit} from "lodash";
//二
import l from "lodash";
l.omit();
//三
import omit from "lodash/omit";

以上三种情况都可以使用 lodash,但是区别在于打包之后对框架的引入程度的不同,第一种方法和第二种方法都是将整个库全部都引入,打包之后是 500 多 k 的引入大小,而第三种方法只是将当前函数及其依赖函数给引入,打包文件大小仅有 6k。可以看出按需加载在打包大小和打包速度上有极大的优势。

查看打包大小

使用 webpack 的插件 webpack-bundle-analyzer,可以通过 webpack 设置 node 环境来进行开发和生产环境下的区分

npm install webpack-bundle-analyzer --save-dev

//在webpack.config.js中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; plugins: [
。。。
new BundleAnalyzerPlugin(),
。。。
]

这样在打包 npm start 或者 npm run build 之后就可以进行打包文件大小的查看了



实践

最近将一个之前照着 underscore 实现的一个函数库进行了 es6 改造,但是在使用中发现并没有实现按需加载。于是就开始了一系列的按需加载的实践与改造,最终使用的方法是 babel 插件的方式实现的。

进行单独文件分离

最初的实现是使用umd的方式进行模块化兼容,所有的大类方法比如array全部写到了array文件夹下的index.js里面,现在将单独的方法放到单独的文件里面。



新建babel插件

在node_modules中新建babel-plugin-kiana-demand-loading文件夹,再添加一个index.js文件,写入内容

const babel = require('babel-core');
const types = require('babel-types'); const array_types = ["flatten"]; module.exports = function (babel) {
return {
visitor: {
ImportDeclaration(path, ref = {opts: {}}) {
let node = path.node;
let {specifiers} = node;
if (ref.opts.library === node.source.value
&& !types.isImportDefaultSpecifier(specifiers[0])
&& !types.isImportNamespaceSpecifier(specifiers[0])) {
let newImports = specifiers.map(specifier => {
if (array_types.includes(`${specifier.local.name}`)) {
//node.source.value => kiana-js
//specifier.local.name => flatten
//path => kiana-js/arrays/flatten
return types.importDeclaration([types.importSpecifier(specifier.local, specifier.local)], types.stringLiteral(`${node.source.value}/kiana/arrays/${specifier.local.name}`))
}
return types.importDeclaration([types.importDefaultSpecifier(specifier.local)], types.stringLiteral(`${node.source.value}/kiana/${specifier.local.name}`))
});
path.replaceWithMultiple(newImports)
}
}
}
}
};

然后执行npm run build后可以根据出现的分析发现,仅仅就引入了一个函数的大小

看到分析发现当前引入的内容仅有flatten和该函数所依赖的object方法,剩下的都没有引入。基本成功,剩下的就是继续拆分和优化了。

npm更新版本

函数库做完了,可以下载引入使用,可以直接安装github上的包。这是是发布到npm上进行管理的安装。

npm login

进行npm的登录,没有账号的官网注册。必须登录

npm publish

将当前库文件进行发布,可以创建一个.npmignore将不想发布的文件或文件夹过滤掉

npm version <update_type>

  • 直接使用npm version是查看当前包和当前所有依赖包的版本
  • 查看单独的包用npm view kiana-js versions,这样就是查看当前发布包的版本。
  • 参数<update_type>有三个参数
    • patch补丁,例如version 1.0.0 => version 1.0.1
    • minor修改,例如version 1.0.0 => version 1.1.0
    • major大版本,例如version 1.0.0 => version 2.0.0

流程

npm login => npm publish(如果没发布过) => npm version xxx => npm publish => npm view xxx versions(可以不看)

Docs

babel 修改抽象语法树——入门与实践

写一个 babel 插件实现按需打包的功能

babel-core

babel-types

按需加载实践

babel-plugin-on-demand-loading

如何更新自己写的npm包(模块

记一次按需加载和npm模块发布实践的更多相关文章

  1. Extjs4.1.x使用Application动态按需加载MVC各模块

    我们知道Extjs4之后提出了MVC模块开发,将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等],通过controller拼接黏合, ...

  2. Webpack按需加载一切皆模块

    前言 在学习 Webpack 之前,我们需要了解一个概念:模块. 何为模块? 如果你曾学过 Java , C# 之类的语言,一定会知道 Java 中的 import 或 C# 中的 using 吧? ...

  3. 按需加载.js .css文件

    首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...

  4. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  5. angularJS 按需加载

    之前做应用的时候都会在首页就把全站的js预先加载进来... 怎么实现按需加载? 首先在$routeProvider里面加resolve属性,angular-route提供的resolve功能,也就是路 ...

  6. react-router配合webpack实现按需加载

    很久没有写博客了.一直感觉没有什么要写的,但是这个东西确实有必要的.使用react开发,不可能一直打包到一个文件.小项目肯定没有问题,但是变大一旦到几兆,这个问题就很严重.现在又Commonjs,AM ...

  7. requirejs按需加载angularjs文件

    之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...

  8. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...

  9. AngularJS中的按需加载ocLazyLoad

    欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...

随机推荐

  1. setUp()和tearDown()函数

    1.什么是setUp()和tearDown()函数? 2.为什么我们要用setUp()和tearDown()函数? 3.我们该怎样用setUp()和tearDown()? 1.什么是setUp()和t ...

  2. Git----GitHub上传本地文件到git

    1.首先在git上创建一个库,用来保存上传的本地文件 2.通过命令 git init 把这个目录变成git可以管理的仓库 git init 3.将远程git库克隆一份保存到本地 git clone x ...

  3. Vue-CLI和脚手架

    但我们学习Vue时,很多教程都会说到用Vue-CLI构建项目,那么什么是脚手架?什么是Vue-CLI?为什么要用脚手架,好处在哪?以及为何我们用Vue开发项目时要用到Vue-CLI? 首先,CLI为c ...

  4. 启动链码报rpc error: code = Unimplemented desc = unknown service protos.ChaincodeSupport start error

    参考链接:https://stackoverflow.com/questions/48007519/unimplemented-desc-unknown-service-protos-chaincod ...

  5. Vue.js-11:第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  6. SpringCloud分布式微服务搭建(一)

    本例子主要使用了eureka集群作为注册中心来保证高可用,客户端来做ribbon服务提供者的负载均衡. 负载均衡有两种,第一种是nginx,F5这种集中式的LB,对所有的访问按照某种策略分发. 第二种 ...

  7. 开发人员必备工具 —— JMeter 压测

    在接口开发完以后,开发人员应该学会对自己的接口先进行压测一下,虽然压测的结果并不一定准确,也不能完全反映真实情况,但是如果有问题的话多少是可以看出的,而且也可以及早做优化,做到心里有底.否则,等测试进 ...

  8. FreeSql v0.5.x 功能介绍

    弱类型 之前在操作实体时,必须传统泛型参数,现在可以实现弱类型实体的操作.以 Repository 为例: var repos = fsql.GetGuidRepository<object&g ...

  9. 理解css之position属性

    之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性.当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结.在这里会注明借鉴或引用文章的出处.侵权即删 ...

  10. 供应链管理为什么要上企业自主可控的免费开源ERP Odoo

    引言 今天的很多企业,无论是制造业,还是商贸行业,如果说没有针对供应链管理的信息系统,那可能是真的冤枉他们了:采购.仓存.销售.存货核算这些模块,早早的买来,早早的用上了,但也早早的被下了结论:食之无 ...