Question

我正在Angular 2中开发一个应用程序，我需要将它投入生产，但加载时间非常长，它执行243请求。是否可以减少请求数量？怎么办？

这是index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<article>
    articol 1
</article>
<article>
    articol 2
</article>
<article>
    articol 3
</article>


<main>
    <h1>h1</h1>
</main>
<main>
    <h1>h2</h1>
</main>
<main>
    <h1>h3</h1>
</main>

这是一个system.conf.js文件

<html>
<head>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
  <link rel="stylesheet" href="../css/main.css">

  <link href="libs/primeng/resources/themes/omega/theme.css" rel="stylesheet" type="text/css" />
  <link href="libs/primeng/resources/primeng.min.css" rel="stylesheet" type="text/css" />
  <link href="libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
  <script src="libs/core-js/client/shim.min.js"></script>
  <script src="libs/zone.js/dist/zone.js"></script>
  <script src="libs/reflect-metadata/Reflect.js"></script>
  <script src="libs/systemjs/dist/system.src.js"></script>

  <div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'ar,de,el,en,es,fr,hi,it,ja,pt,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


  <!-- 2. Configure SystemJS -->
  <script src="systemjs.config.js"></script>
  <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<!-- 3. Display the application -->

<body>
    <my-app><div class="loading-center"><span>Cargando</span></div></my-app>
</body>
</html>

的package.json

var isPublic = typeof window != "undefined";

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',       
    '@angular':                   (isPublic)? '@angular' : 'node_modules/@angular',
    'rxjs':                       (isPublic)? 'rxjs' : 'node_modules/rxjs',
    'angular2-jwt':               '../libs/angular2-jwt/angular2-jwt.js',
    'primeng':                    '../libs/primeng'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {    
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-jwt':               { defaultExtension: 'js' },
    'primeng':                    { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade'
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

gulpfile.js

{
  "name": "angular2-express-mongo",
  "version": "1.0.0",
  "description": "Angular2, Mongo, Gulp, Typescript and Express",
  "scripts": {
    "clean": "gulp clean",
    "compile": "gulp compile",
    "build": "gulp build",
    "deploy": "concurrently --kill-others \"gulp watch\" \"gulp start\"",
    "postinstall": "gulp installTypings"
  },

  "keywords": [
    "Angular2",
    "Express",
    "Quick Start",
    "Gulp",
    "Typescript"
  ],
  "author": "Santiago",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "angular-in-memory-web-api": "~0.1.15",
    "angular2-jwt": "^0.1.22",
    "body-parser": "^1.15.2",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "font-awesome": "^4.7.0",
    "jsonwebtoken": "^7.1.9",
    "jwt-decode": "^2.0.1",
    "mongoose": "^4.6.1",
    "nodemailer": "^2.7.0",
    "primeng": "^1.0.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.32",
    "concurrently": "^2.1.0",
    "method-override": "^2.3.6",
    "typescript": "~2.0.3",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-nodemon": "^2.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^4.3.3",
    "gulp-typescript": "^2.13.6",
    "gulp-typings": "^2.0.0",
    "del": "^2.2.0",
    "tslint": "^3.5.0",
    "ts-node": "1.3.0",
    "run-sequence": "^1.2.1"
  }
}

App Angular 2，减少生产模式下的请求

0 个答案: