Question

我有一个AngularJS应用程序，可在此URL下访问：

它有一个奇怪的行为：我将我的应用程序的URL写入URL输入并按Enter键，如果我打开开发人员工具，那么在没有打开的开发人员工具（F12）的情况下加载大约需要20秒大约5秒，这没关系。对于其他浏览器，如opera，Firefox和IE，初始加载应用程序总是需要5秒钟。

我现在的问题是，如果有人对这种奇怪的行为有任何解释吗？

Answer 1

这是一个猜测，但似乎你最好将整个项目咕噜咕噜/缩小为3个文件。

该项目包含许多.js文件，因此需要更多时间。

https://www.youtube.com/watch?v=TMKj0BxzVgw

尝试此视频，如果您通过grunting / minifying将所有这246个请求分成3个请求，那就可以了解

此外，它目前需要最多5秒

编辑：

我又找到了自己的代码。

这是在package.json

中

    "grunt": "^1.0.1",
    "grunt-angular-templates": "^1.0.4",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-usemin": "^3.1.1",

它创建了这个树文件夹树：

 dist >
    css >
        css.min.css
    scripts >
        app.min.js
        vendor.min.js

而不是我的app文件夹包含超过10个带.js文件的文件夹。

的index.html

    <!-- build:css css/css.min.css -->
    <link rel="stylesheet" href="Something.css"></link>
    <link rel="stylesheet" href="Something.css"></link>
    <!-- endbuild -->

    <!-- build:js scripts/vendor.min.js -->
    <script src="Something.js"></script>
    <script src="Something.js"></script>
    <script src="Something.js"></script>
    <!-- endbuild -->

    <!-- build:js scripts/app.min.js -->
    <script type="text/javascript" src="Something.js"></script>
    <script type="text/javascript" src="Something.js"></script>
    <script type="text/javascript" src="Something.js"></script>
    <!-- endbuild -->

Answer 2

响应时间慢的问题是因为加载了太多文件。您的应用程序加载带有ng-include的html文件，并且在加载所有脚本之前它不会开始加载该文件。我建议将所有脚本捆绑到一个文件中。这会将加载时间减少至少一半。这是一个很好的插件，可以将您的库从bower捆绑到一个文件https://www.npmjs.com/package/gulp-bundle-assets。

同样好的做法是在你的html文件中放置静态html，以后将替换为你想要的内容

<body ng-include='app/core/aposoft.html'>
   <div> App is initializing </div>
</body>

使用这样的html，您将让用户知道应用程序正在加载，您可以使用css更好地设置样式。将所有脚本放在</body>标记下方。还可以在服务器上为所有脚本启用缓存。

通过这种方式，您可以使用单个文件来加载所有脚本和初始html，以向用户显示您的应用正在初始化，下次同一个用户打开您的应用时，它会非常快。

注意：为了避免在使用新版本时缓存问题，您应该使用https://www.npmjs.com/package/gulp-useref

谷歌Chrome初始加载AngularJS应用程序

2 个答案: