2016-03-18 6 views
0

Ich habe meine eckige 2 App auf heroku geschoben, aber es dauert zu lange, um zu laden.App dauert zu lange, um in Produktion zu laden

ist es eine Möglichkeit, alles zu bündeln, weil jetzt ich dies habe in meinem 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> 

Mein Setup ist Express Server und System 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

einen Blick auf systemjs Bauer nehmen; alles, was über systemjs geladen wird, kann in ein selbstausführendes Skript gebündelt werden (das alle systemjs Abhängigkeiten zusätzlich zu Ihren eigenen enthält). –

+0

Sie können diese beiden populären Seeds mit webpack bzw. systemjs betrachten: [angular2-webpack-starter] (https://github.com/AngarClass/angular2-webpack-starter), [angular2-seed] (https: //github.com/mgechev/angular2-seed). –

Antwort

1

Wenn sein das freie Heroku Tier sein vermutlich, weil sein Schlaf, wenn Sie es wünschen?

Sie können Ihre js-Dateien verkleinern und verketten, um Ladezeiten zu verkürzen.

Hier ist eine Anleitung, wie man die Aufgaben mit großer Schluck zu tun: https://caveofcode.com/2016/03/gulp-tasks-for-minification-and-concatenation-of-dependencies-in-angularjs/

+0

was viel Zeit kostet ist system.src.js aus irgendeinem Grund macht es mehr als 500 Anfragen. –

+0

Wow das ist viel. Ich habe nur die .net Bundles und Schluckaufgaben für diese Art von Sachen verwendet. Hoffe, du wirst es aussortiert bekommen! –

Verwandte Themen