避免加载所有 javascript 文件答案

【问题标题】：Avoid to load all javascripts files避免加载所有 javascript 文件
【发布时间】：2016-08-15 12:12:51
【问题描述】：

我在打字稿中使用 rxjs，如下所示：

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();
  });

和文件结构

问题是，打字稿将其编译为多个文件而不是一个文件。

一切正常，但来自 rxjs 的所有脚本都将按如下所示加载：

加载页面需要 25.42 秒，这太可怕了。我只使用Observable 对象，所有库都将被加载。

如何防止长时间加载？

更新对于后端，我使用的是 ASP.NET Core，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>

【问题讨论】：

缩小和捆绑就可以了。
您在项目中使用什么构建系统？
人们经常用 AMD 加载器解决这个问题。参见例如requirejs.org
我更新了我的帖子，请检查。

标签： javascript typescript asp.net-core rxjs5

【解决方案1】：

如何防止长时间加载

请使用模块打包器来打包和发布一个 JS 文件，例如网页包

这是一个非常简单（功能很差）的快速入门：https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html

【讨论】：

更多