应用需要太长时间才能在生产中加载

Question

I have pushed my angular 2 app on heroku but it takes too long to load. 我已经在heroku上推送了我的angular 2应用程序，但是加载时间太长。

is there a way to bundle everything up because right now i have this in my index.html 有没有办法捆绑一切，因为现在我在index.html中有这个

<html>
<head>
    <base href="/">
    <title>Angular 2 Arc</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <ng2-app>Loading...</ng2-app>
  <!-- Load Angular 2 Core libraries -->
  <script src="es6-shim/es6-shim.min.js"></script>
  <script src="systemjs/dist/system-polyfills.js"></script>
  <script src="angular2/bundles/angular2-polyfills.js"></script>
  <script src="systemjs/dist/system.src.js"></script>
  <script src="rxjs/bundles/Rx.js"></script>
  <script src="angular2/bundles/angular2.dev.js"></script>
  <script src="angular2/bundles/router.dev.js"></script>
  <script src="angular2/bundles/http.js"></script>
  <!-- Load Bootstrap and Jquery -->
  <script src="lib/jquery/jquery.min.js" charset="utf-8"></script>
  <script src="lib/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" />
  <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
  <link rel="stylesheet" href="assets/css/app.css">
  <!-- Configure SystemJS -->
  <script>
      System.config({
          defaultJSExtensions: true,
          packages: {
              boot: {
                  format: 'register',
                  defaultExtension: 'js'
              }
          }
      });
      System.import('js/boot')
              .then(null, console.error.bind(console));
  </script>
</body>
</html>

My setup is express server and system JS. 我的设置是Express服务器和系统JS。

server.js server.js

var express = require('express');
var bodyParser = require('body-parser')
var fs = require("fs");

// initialize express
var app = express();

// declare build and node_module paths

app.use(express.static("./build"));
app.use(express.static("./node_modules/"));

// parse request body
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

var body;
// route to send json data from angular 2
app.post('/export', function(req, res){
  body = req.body;
  res.json("Got the data!");

  fs.writeFile('parameters.json', JSON.stringify({body}, null, 4), function (err) {
    if (err) return console.log(err);
    console.log('Data json file created!');
  });
});


// start server
app.listen(process.env.PORT || "3001", function(){
  console.log("Express server running on localhost:3001");
});

Answer 1

If its the free heroku tier its probably because its sleeping when you request it? 如果它是免费的heroku层，可能是因为您在请求时就处于休眠状态？

You can minify and concatenate your js files to decrease load times. 您可以缩小和连接js文件，以减少加载时间。

Here is a guide on how to do that with gulp tasks: https://caveofcode.com/2016/03/gulp-tasks-for-minification-and-concatenation-of-dependencies-in-angularjs/ 这是有关如何使用gulp任务执行此操作的指南： https : //caveofcode.com/2016/03/gulp-tasks-for-minification-and-concatenation-of-dependencies-in-angularjs/

应用需要太长时间才能在生产中加载

问题描述

1 个解决方案

解决方案1
1 2016-03-18 17:34:39

应用需要太长时间才能在生产中加载

问题描述

1 个解决方案

解决方案1 1 2016-03-18 17:34:39

解决方案1
1 2016-03-18 17:34:39