angular+require按需加载

作者: 幸福幸福幸福 | 来源:发表于2017-05-01 09:32 被阅读120次

angular+require按需加载
4.11.1 用 Webpack 实现按需加载
4.11.2 实例强化（按需加载与 ReactRouter）
VUE首屏加载优化
iOS技术文档No.24 Foundation_NSBundle
Ant-Design-Vue和Icon按需加载方案 - Jeec
react-app中使用antd，实现css按需加载
create-react-app run-eject配置antd
layui使用笔记
react大型项目的按需加载和代码拆分。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ipc后台管理系统</title>
</head>
<body>

<script src="res/lib/require/require.min.js" data-main="res/script/main" defer async></script>
</body>
</html>

main.js

window.loading={
    finish:function(callback){
        //保留这个方法做一些加载完成后的处理，比如可以在这里结束加载动画
        callback();
    },
    load:function(){
        // var domain='https://865077695.github.io/admin/';
        var domain='';
        var baseUrl = domain+'res';
        require.config({
            baseUrl:baseUrl,
            paths:{
                "domReady":["https://cdn.bootcss.com/require-domReady/2.0.1/domReady.min","lib/require/domReady.min"],
                "angular":["https://cdn.bootcss.com/angular.js/1.3.20/angular.min","lib/angular/angular.min"],
                "angularTouch":["https://cdn.bootcss.com/angular.js/1.3.20/angular-touch.min","lib/angular/angular-touch.min"],
                "angularAnimate":["https://cdn.bootcss.com/angular.js/1.3.20/angular-animate.min","lib/angular/angular-animate.min"],
                "uiBootstrap":["https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min","lib/angular/ui-bootstrap-tpls.min"],
                "uiRouter":["https://cdn.bootcss.com/angular-ui-router/0.4.2/angular-ui-router.min","lib/angular/angular-ui-router.min"],
                "angular-nice-bar":"lib/angular/angular-nice-bar",
                "asyncLoader":"lib/angular/angular-async-loader",
                "jquery":["https://cdn.bootcss.com/jquery/1.12.4/jquery.min","lib/jquery/jquery.min"],
                "echarts":["https://cdn.bootcss.com/echarts/3.4.0/echarts.min","lib/echarts/echarts.min"],
                "chinaMap":"lib/echarts/china",
                "loadCss":"script/loadCss",
                'load':"lib/load",
                "routes":"script/routes",
                "app":"script/app",
                "index":"script/index",
                "superController":"script/superController",
                "myService":"script/myService",
                "myDirective":"script/myDirective"
            },
            shim:{
                "angular":{
                    exports:"angular"
                },
                "uiRouter":{
                    deps:["angular"]
                },
                "angularTouch":{
                    deps:["angular"]
                },
                "angularAnimate":{
                    deps:["angular"]
                },
                "uiBootstrap":{
                    deps:["angular","angularTouch","angularAnimate"]
                },
                "load":{
                    exports:"load"
                },
                "angular-nice-bar":{
                    deps:["angular"]
                },
                "echarts":{"exports":"echarts"}
            },
            deps:['index']
        });
    }
    
}
window.loading.load();//执行配置

index.js 启动angular

define(["require", "load"], function (require,load)
{
    load.onLoading();   //开始执行动画、load是一个加载动画的小插件
    require(["angular","routes","myDirective"],function(angular){//载入angular、routes配置、directive配置
        require(['domReady!'], function (document)
        {     //domReady依赖的!前缀来强制require()回调函数在执行之前等待DOM Ready。
            /*手工启动angular*/
            window.loading.finish(function ()
            {
                angular.bootstrap(document,['app']);//启动ng
                load.close();//关闭动画
            });
        });
    })
})