按需加载的那些事儿

前言：最近很多地方都出现了按需加载这个东西，第一次接触是在使用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;
}
//需要引入的css
var cssArray = [];
//需要引入的JavaScript
var 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);
//加载css
for(var i=0; i<cssArray.length; i++) {
    loadCss(cssArray[i]);
}
//加载JavaScript
for(var i=0; i<jsArray.length; i++) {
    loadJs(jsArray[i]);
}

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