记一次按需加载和npm模块发布实践
按需加载
在使用 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模块发布实践的更多相关文章
- Extjs4.1.x使用Application动态按需加载MVC各模块
我们知道Extjs4之后提出了MVC模块开发,将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等],通过controller拼接黏合, ...
- Webpack按需加载一切皆模块
前言 在学习 Webpack 之前,我们需要了解一个概念:模块. 何为模块? 如果你曾学过 Java , C# 之类的语言,一定会知道 Java 中的 import 或 C# 中的 using 吧? ...
- 按需加载.js .css文件
首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...
- Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现
文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...
- angularJS 按需加载
之前做应用的时候都会在首页就把全站的js预先加载进来... 怎么实现按需加载? 首先在$routeProvider里面加resolve属性,angular-route提供的resolve功能,也就是路 ...
- react-router配合webpack实现按需加载
很久没有写博客了.一直感觉没有什么要写的,但是这个东西确实有必要的.使用react开发,不可能一直打包到一个文件.小项目肯定没有问题,但是变大一旦到几兆,这个问题就很严重.现在又Commonjs,AM ...
- requirejs按需加载angularjs文件
之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...
- angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js
用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...
- AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
随机推荐
- setUp()和tearDown()函数
1.什么是setUp()和tearDown()函数? 2.为什么我们要用setUp()和tearDown()函数? 3.我们该怎样用setUp()和tearDown()? 1.什么是setUp()和t ...
- Git----GitHub上传本地文件到git
1.首先在git上创建一个库,用来保存上传的本地文件 2.通过命令 git init 把这个目录变成git可以管理的仓库 git init 3.将远程git库克隆一份保存到本地 git clone x ...
- Vue-CLI和脚手架
但我们学习Vue时,很多教程都会说到用Vue-CLI构建项目,那么什么是脚手架?什么是Vue-CLI?为什么要用脚手架,好处在哪?以及为何我们用Vue开发项目时要用到Vue-CLI? 首先,CLI为c ...
- 启动链码报rpc error: code = Unimplemented desc = unknown service protos.ChaincodeSupport start error
参考链接:https://stackoverflow.com/questions/48007519/unimplemented-desc-unknown-service-protos-chaincod ...
- Vue.js-11:第十一章 - Vue 中 ref 的使用
一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...
- SpringCloud分布式微服务搭建(一)
本例子主要使用了eureka集群作为注册中心来保证高可用,客户端来做ribbon服务提供者的负载均衡. 负载均衡有两种,第一种是nginx,F5这种集中式的LB,对所有的访问按照某种策略分发. 第二种 ...
- 开发人员必备工具 —— JMeter 压测
在接口开发完以后,开发人员应该学会对自己的接口先进行压测一下,虽然压测的结果并不一定准确,也不能完全反映真实情况,但是如果有问题的话多少是可以看出的,而且也可以及早做优化,做到心里有底.否则,等测试进 ...
- FreeSql v0.5.x 功能介绍
弱类型 之前在操作实体时,必须传统泛型参数,现在可以实现弱类型实体的操作.以 Repository 为例: var repos = fsql.GetGuidRepository<object&g ...
- 理解css之position属性
之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性.当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结.在这里会注明借鉴或引用文章的出处.侵权即删 ...
- 供应链管理为什么要上企业自主可控的免费开源ERP Odoo
引言 今天的很多企业,无论是制造业,还是商贸行业,如果说没有针对供应链管理的信息系统,那可能是真的冤枉他们了:采购.仓存.销售.存货核算这些模块,早早的买来,早早的用上了,但也早早的被下了结论:食之无 ...