2016-08-15 107 views
0

我使用rxjs如按照打字稿所有的JavaScript文件:避免加载

import {Observable} from "./rx/Rx" 

var main =() => { 

    $(".ui.dropdown").dropdown(); 
    $(".left-half").backstretch(["../images/lotus.jpg"]); 

    var source = Observable.range(0, 3); 


    var subscription = source.subscribe(
    x => { 
     console.log("Next: ${x}"); 
    }, 
    err => { 
     console.log("Error: ${err}"); 
    }, 
    () => { 
     console.log("Completed"); 
    }); 

}; 

$(document) 
    .ready(() => { 
    main(); 
    }); 

和文件结构

enter image description here

问题,打字稿把它编译成多文件,而不是只有一个文件。 enter image description here

万物工作正常,但是从rxjs所有脚本将负荷显示:
enter image description here

加载网页,它需要25.42s,这是可怕的。我只使用Observable对象,所有库都将被加载。

如何防止长时间加载?

更新 对于后端我使用ASP.NET核心和tsconfig文件看起来如下:

{ 
    "compilerOptions": { 
    "module": "amd", 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es6", 
    "outDir": "../wwwroot/js" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
} 

而且require.js使用(布局模板):

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>@ViewData["Title"] - IndustryCloud</title> 

    <environment names="Development"> 
    <link href="~/lib/sui/semantic.css" rel="stylesheet" /> 
    <link rel="stylesheet" href="~/css/site.css" /> 
    </environment> 

    <environment names="Staging,Production"> 
    <link href="~/lib/sui/semantic.min.css" rel="stylesheet" /> 
    <link rel="stylesheet" href="~/css/site.css" /> 
    </environment> 

</head> 
<body> 

    @RenderBody() 

    <environment names="Development"> 
    <script src="~/lib/jquery/jquery.js"></script> 
    <script src="~/lib/jquery-backstretch/jquery.backstretch.js"></script> 
    <script src="~/lib/sui/semantic.js"></script> 
    <script src="~/lib/require/require.js" data-main="../js/signin.js"></script> 
    </environment> 

    <environment names="Staging,Production"> 

    </environment> 

</body> 
</html> 
+0

缩小和捆绑销售将做的工作。 –

+0

你在你的项目中使用什么构建系统? – semanser

+0

人们经常用AMD装载机解决这个问题。看例如http://requirejs.org/ – Meeh

回答