Google Chrome 初始加载 AngularJS 应用程序

Question

我有一个 AngularJS 应用程序，可以在此 url:

下访问

它有一个奇怪的行为：我将我的应用程序的 URL 写入 URL 输入并按回车键， Google Chrome 大约需要 20无需打开开发人员工具 (F12) 即可加载的秒数，如果我打开开发人员工具，大约需要 5 秒，这没问题。对于其他浏览器，如 Opera、Firefox 和 IE，初始加载应用程序总是需要大约 5 秒。

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

Answer 1

这是一个相当大的猜测，但似乎您最好 grunting/minifying 将整个项目分成 3 个文件。

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

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

试试这个视频，如果你能将所有这些 246 个请求变成 grunting/minifying 的 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

而不是我的应用程序文件夹包含超过 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

Google Chrome 初始加载 AngularJS 应用程序

Google Chrome initial loading of AngularJS application

load

google-chrome

angularjs