按需加载的那些事儿

前言：最近很多地方都出现了按需加载这个东西，第一次接触是在使用element-ui的时候，后面在用easyui做管理信息系统的时候也发现了这个东西。想着还是来总结一下，因为这的确是一个非常有用的东西，极大了减少了引入文件的大小，也减轻了服务器的压力。笔者认为在未来这个一定会成为一种趋势

1、动态样式

在说按需加载之前，我们先来聊聊动态样式。动态样式是什么呢？其实就是根据需要进行动态加载样式。下面我们进行一个简单的实现。
首先我们定义好一个btn.css文件

.btn {    width: 120px;    height: 40px;    border: none;    background-color: orange;    color: white;    cursor: pointer;    outline: none;}.btn:hover {    background-color: #EE7600;}

然后在我们页面进行样式的动态添加

<button class="btn">我是按钮</button><script>    window.onload = function() {        var cssLink = document.createElement("link");        cssLink .rel = "stylesheet";        cssLink .type = "text/css";        cssLink .href = "btn.css";        var head = document.getElementsByTagName("head")[0];        head.appendChild(cssLink );    }</script>

通过动态样式，我们大概就知道了按需加载是怎么实现的了，我们下面来简单实现一个按需加载的例子。
loader.js（核心文件）

//模块文件var modules = {    btn: {        css: "btn",        js: "btn"    },    circleBtn: {        css: 'circle-btn',        dependencies: ['btn']    },    menu: {        class: 'menu',    }}//加载CSS文件function loadCss(url) {    var link = document.createElement("link");    link.rel = "stylesheet";    link.type = "text/css";    link.href = "css/"+url+".css";    var head = document.getElementsByTagName("head")[0];    head.appendChild(link);}//加载JavaScript文件function loadJs(url) {    var script = document.createElement('script');    script.type = 'text/javascript';    script.language = 'javascript';    script.src = "js/"+url+".js";    var head = document.getElementsByTagName("head")[0];    head.appendChild(script);}//去除数组中重复的内容function removeRepeat(args) {    var result = [];    for(var i=0; i<args.length; i++) {        if(result.indexOf(args[i]) < 0) {            result.push(args[i]);        }    }    return result;}//需要引入的cssvar cssArray = [];//需要引入的JavaScriptvar jsArray = [];//遍历模块for(module in modules) {    var cssName = modules[module]['css'];    var jsName = modules[module]['js'];    var objects = document.querySelectorAll("."+cssName);    if(objects.length){        cssArray.push(cssName);        if(jsName) {            jsArray.push(jsName);        }    }    var dependencies = modules[module]['dependencies'];    if(dependencies) {        for(var i=0; i<dependencies.length; i++) {            var dependenciesCSS = modules[dependencies[i]]['css'];            var dependenciesJS = modules[dependencies[i]]['js'];            for(var j=0; j<objects.length; j++) {                objects[j].classList.add(dependenciesCSS);            }            cssArray.push(dependenciesCSS);            jsArray.push(dependenciesJS);        }    }}cssArray = removeRepeat(cssArray);jsArray = removeRepeat(jsArray);//加载cssfor(var i=0; i<cssArray.length; i++) {    loadCss(cssArray[i]);}//加载JavaScriptfor(var i=0; i<jsArray.length; i++) {    loadJs(jsArray[i]);}

如果想要源码，可以在我的github上获取