2016-08-15 4 views
0

я с помощью rxjs, как следовать в машинописи:Избегайте загружать все JavaScripts файлы

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

Everythings работает отлично, но все сценарии из rxjs будет нагрузка, как показано:
enter image description here

Чтобы загрузить страницу, он принимает 25.42s, и это ужасно. Я использую только объект Observable, и все библиотеки будут загружены.

Как предотвратить длительную загрузку?

Update Для внутреннего интерфейса Я использую 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

ответ

1

Как предотвратить длительную нагрузку

Пожалуйста, используйте комплект модулей для комплектации и отправки только одного JS-файла, например. WebPack

Больше

Вот ослепляющий простой (функция бедные) Быстрый старт: https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html

Смежные вопросы