2016-03-18 196 views
0

我已將我的角度2應用程序推送到heroku,但加載時間過長。應用程序需要很長時間才能加載生產

有沒有辦法捆綁一切了,因爲現在我有這個在我的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> 

我的設置是Express服務器和系統的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"); 
}); 
+0

看看systemjs建設者;通過systemjs加載的任何東西都可以綁定到一個自執行的腳本中(除了你自己的腳本之外,還包含所有的systemjs依賴)。 –

+0

你可以分別使用webpack和systemjs來看看這兩種流行的種子:[angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter),[angular2-seed](https: //github.com/mgechev/angular2-seed)。 –

回答

1

如果其免費的Heroku層其可能是因爲它的睡眠,當你申請了嗎?

您可以縮小和連接您的js文件以減少加載時間。

這裏是如何做到這一點與一飲而盡任務指南: https://caveofcode.com/2016/03/gulp-tasks-for-minification-and-concatenation-of-dependencies-in-angularjs/

+0

什麼似乎需要很多時間是system.src.js由於某種原因它使500多個請求。 –

+0

哇,這很多。我只使用.net軟件包和gulp任務來完成這件事。希望你能理清它! –

相關問題