按需加载

在使用 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. 磁盘IOPS计算与测量

    IOPS (Input/Output Per Second)即每秒的输入输出量(或读写次数),是衡量磁盘性能的主要指标之一.IOPS是指单位时间内系统能处理的I/O请求数量,一般以每秒处理的I/O请求 ...

  2. html中layui+jfinal模板实现前端搜索功能

    <input type="text" id="campus" class="layui-input" onkeyup="ck ...

  3. PPT分享第01季-226套多种风格模板

    包含商务欧美扁平风.唯美文艺IOS风.互联网计划书风.扁平风手绘风卡通风 .中国风等多种风格 下面是部分模板截图: 下面是下载地址

  4. Qt之表格控件蚂蚁线

    一.蚂蚁线 摘自互动百科:在图像影像软件中表示选区的动态虚线,因为虚线闪烁的样子像是一群蚂蚁在跑,所以俗称蚂蚁线.在Poshop,After Effect等软件中比较常见. 背景:用过excel的同学 ...

  5. 服务端预渲染之Nuxt(介绍篇)

    现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的 ...

  6. Asp.Net Core使用SignalR进行服务间调用

    网上查询过很多关于ASP.NET core使用SignalR的简单例子,但是大部分都是简易聊天功能,今天心血来潮就搞了个使用SignalR进行服务间调用的简单DEMO. 至于SignalR是什么我就不 ...

  7. 看看redis中那些好玩的module (sql on redis, bf/cf on redis)

    自从redis加入了module功能之后,redis的生态就很有意思了,每个领域的大佬都会以插件的形式给redis扩展一些新的功能,比如本篇说到的rediSQL,rebloom. 一:rediSQL ...

  8. angular开发环境搭建及新建项目

    最近一个星期准备学习一下angular前端框架,因为之前在学习abp框架的时候,都要求前端要掌握angular,所以不得不回来恶补一下了,学习的过程有时间的话会记录在这里,方便以后复习. 闲言少叙,下 ...

  9. 第一册:lesson1-2.

    原文: lesson 1 Excuse me! Excuse me! Yes? Is this your handbag? Pardon? Is this your handbag? Yes it i ...

  10. CSS引入本地字体与在线字体

    有些时候为了强调某些文字,需要使用一些比较特别的字体,CSS中现在也可以比较方便的引入字体了,如下: /* 定义字体 */ @font-face{ font-family: Arista2; src: ...