模块化系统简述
目的
前端是基于多语言、多层次的编码和组织工作,同时,前端的交付基于浏览器,这些资源是通过增量加载的方式运行于浏览器端,如何在开发环境组织好这些碎片化的代码和资源,保证浏览器端快速、优雅的加载和更新,需要一个模块化的系统。
Webpack 中文网
概念准备
CommonJS 规范-服务器端
在浏览器环境外构建 JavaScript 生态系统为目标而产生的项目;
允许模块通过 require 方法同步加载所有依赖的模块;
这种模式会在浏览器端阻塞加载,不能非阻塞端并行加载多个模块;
AMD 规范-Asynchronous MOdule Definition
为浏览器环境而设计的,通过 define 函数将真正的执行函数定义在闭包中;
// define(id?: String, dependencies?: String[], factory: Function|Object); define("module", ["dep1", "dep2"], function(d1, d2){ return ...; }); require(["module", "../file"], function(module, file){ ... })
将依赖的模块提前执行,依赖前置
缺点:提高开发成本,模块定义方式的语义不畅;不符合模块化思维;
CMD 规范-Common Module Definition
define(function(require, exports, module){ var $ = require('jquery'); var Spinning = require('./spinning'); exports.doSomething = ...; module.exports = ... })
ES6 模块-新的模块化标准,推荐使用
import "jquery"; export function doStuff(){}; module "localModule" { ... }
解决方案
分块传输,惰性加载,应用到某些模块的时候再增量更新,较为合理;
**
前行的路上,感谢您的鼓励!!
**