Question

我有index.html，其中定义了所有源Javascripts和ui-view。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <title>Projects</title>
    <link rel="stylesheet" href="resources/css/style.css">
    <link rel="stylesheet" href="resources/css/external/c3.min.css">
    <link href="resources/css/external/colorpicker.css" rel="stylesheet">
    <link href="resources/css/external/googlechart.css" rel="stylesheet">
    <script type="text/javascript" src="scripts/dndTree.js"></script>

    <!-- Controllers -->
    <!-- Controllers for dashboard -->
    <script type="text/javascript" src="app/shared/headercontroller.js"></script>
    <script type="text/javascript" src="app/views/homepage/project/projectcontroller.js"></script>
    <script type="text/javascript" src="app/views/homepage/conceptmodel/cmdboardcontroller.js"></script>
    <script type="text/javascript" src="app/views/homepage/repository/repositorycontroller.js"></script>
    <script type="text/javascript" src="app/views/homepage/ontology/ontdboardcontroller.js"></script>
    <script type="text/javascript" src="app/views/overview/section/component/componentmanager.js"></script>
    <script type="text/javascript" src="app/views/overview/section/component/componenttemplate.js"></script>

    <!-- document viewer js -->
    <script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
    <script type="text/javascript" src="app/views/analysis/docviewer/model/solrdocument.js"></script>
    <script type="text/javascript" src="app/views/analysis/docviewer/controller/docviewercontroller.js"></script>
</head>

<body id="db" class="homepage" ng-app="ipaApp">
    <ui-view></ui-view>

</body>

</html>

我有大约150个这样的js文件，当前加载webapp时会加载所有文件，导致加载时间增加。我想缩小所有这些文件并加载与index.html中的仪表板相关的文件以及子模板中的其他文件，以获得更好的用户体验。我试图在模板中移动这些脚本，但没有成功。有可能这样做吗？什么是解决这个问题的最佳方法？

Answer 1

一种常见的方法是将脚本标记移动到body标记的末尾，这样就加载了内容（html）并且最后加载了脚本，因此用户体验更好。

尽管第一次可能需要一些时间来完全加载所有资源，但之后，您将看到结果，因为您不必再次加载任何其他资源，用户体验比如果用户体验要好得多。您每次在不同的模板中加载一些脚本。这将分配许多部分的初始时间（对于每个模板）。更不用说你可以多次从一个模板切换到另一个模板（这样你再次加载相同的资源）。这是一个透视问题，你的最终目标是什么：在开始时而不是在那之后投入一些时间，或者只为你加载的每个模板划分一小部分时间。

第一种方法就是这样：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <title>Projects</title>
    <link rel="stylesheet" href="resources/css/style.css">
    <link rel="stylesheet" href="resources/css/external/c3.min.css">
    <link href="resources/css/external/colorpicker.css" rel="stylesheet">
    <link href="resources/css/external/googlechart.css" rel="stylesheet">
</head>

<body id="db" class="homepage" ng-app="ipaApp">
    <ui-view></ui-view>


<script type="text/javascript" src="scripts/dndTree.js"></script>

    <!-- Controllers -->
    <!-- Controllers for dashboard -->
    <script type="text/javascript" src="app/shared/headercontroller.js"></script>
    <!-- ... -->

    <!-- document viewer js -->
    <script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
    <!-- ... -->


</body>

</html>

希望这有帮助：）

如何从angularjs中的模板加载脚本

1 个答案: