1.0.13 • Published 7 years ago

jet-loader v1.0.13

Weekly downloads
-
License
ISC
Repository
-
Last release
7 years ago

jet-loader

当前项目里可能存在以下几种问题 1. 一个组件一个js文件,因为系统原因,也不能简单打包文件,导致页面加载许多js文件,不符合优化规范 2. 即使在项目里按照规范打包,也会出现该页面加载的打包文件有一部分是该页面不需要的模块,导致资源加载多余

jet项目就是为了去解决这么问题的

Jet,将提供以下解决方案:

  • 通用代码将通过包管理的方式来进行,并提供适合Web的AMD声明机制;
  • 代码组织方式通过更严格的AMD子集标准来体现,并且是平铺式的文件粒度的Define;
  • 页面的模块依赖方式将被动态的解析处理,结合应用场景完成智能化打包合并资源请求;

而jet-loader就是整个jet系统至关重要的一环,在页面里实现按照页面所需动态加载模块,并实现诸如,combo、cdn等服务和各种打包,缓存优化

依赖

  1. 定制版esl: 代码在test/esl.js

使用

<script src="./esl.js"></script>
<script src="./jet-loader.js"></script>
<script>
var jetOpt = {
   map: {} // 模块的依赖映射关系
};
var jetLoader = new JetLoader(jetOpt);
jetLoader.run();
</script>

模块依赖关系说明

以模块zhaopin/home/index说明

{
    'zhaopin/home/index': {
        p: 'zhaopin/home/index.12.js', // 模块`zhaopin/home/index` 的 实际代码地址
        d: ['fusion/tab/index'], // 模块`zhaopin/home/index` 的强依赖,必须要先加载好,模块才能执行,即 require('zhaopin/home/async')
        a: ['zhaopin/home/async'] // 模块`zhaopin/home/index` 的弱依赖或叫异步依赖,即require(['zhaopin/home/async'])
    },
}

以下为mock的某项目的模块的依赖映射关系

var map = {
    'zhaopin/home/index': {
        p: 'zhaopin/home/index.12.js', // path
        d: ['fusion/tab/index'], // deps
        a: ['zhaopin/home/async'] // async deps 动态require
    },
    'zhaopin/home/header': {
        p: 'zhaopin/home/index.12.js', // path
        d: [], // deps
        a: [] // async deps 动态require
    },
    'zhaopin/home/async': {
        p: 'zhaopin/home/async.99.js', // path
        d: ['fusion/popup/index'], // deps
        a: []
    },
    'zhaopin/home/branch': {
        p: 'zhaopin/home/branch.33.js', // path
        d: ['fusion/tab/index'], // deps
        a: []
    },
    'fusion/tab/index': {
        p: 'fusion/tab/index.66.js', // path
        d: ['fusion/util'], // deps
        a: []
    },
    'fusion/popup/index': {
        p: 'fusion/popup/index.77.js', // path
        d: ['fusion/util'], // deps
        a: []
    },
    'fusion/util': {
        p: 'fusion/util.20.js', // path
        d: [], // deps
        a: []
    }
};

模块依赖关系生成

靠手动去写下项目里的所有模块依赖关系,几乎不可行 因此为了自动获取项目的模块依赖关系,目前已经提供一款 静态模块分析工具

1.0.13

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago