每次刷新后，Angular 2需要14秒才能加载

时间：2016-10-20 16:33:35

标签： angular

当我第一次加载屏幕或刷新屏幕时，我正在使用Angular 2 RC-5。加载页面需要花费大量时间。是因为它是单页应用程序。

我正在使用system.js作为包

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'webjars/rxjs/5.0.0-beta.6',
    'angular2-in-memory-web-api': 'webjars/angular2-in-memory-web-api/0.0.15',
    '@angular/common':            'webjars/angular__common/2.0.0-rc.5',
    '@angular/compiler':           'webjars/angular__compiler/2.0.0-rc.5',
    '@angular/forms':            'webjars/angular__forms/0.3.0',
    '@angular/core':             'webjars/angular__core/2.0.0-rc.5',
    '@angular/http':            'webjars/angular__http/2.0.0-rc.5',
    '@angular/platform-browser': 'webjars/angular__platform-browser/2.0.0-rc.5',
    '@angular/platform-browser-dynamic': 'webjars/angular__platform-browser-dynamic/2.0.0-rc.5',
    '@angular/router': 'webjars/angular__router/3.0.0-rc.1',
    '@angular/router-deprecated': 'webjars/router-deprecated/2.0.0-rc.2'
  };
  // 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-in-memory-web-api': { defaultExtension: 'js' },
  };
  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/forms',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
  ];
  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

enter image description here

的index.html 

<!DOCTYPE html>
<html>
<head>
<!-- Set the base href -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<base href="/">
<title>TIPS</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.css"></link>
<link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="webjars/datatables/1.10.12/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="webjars/jquery-ui/1.12.0/jquery-ui.css">
<link rel="stylesheet" href="webjars/nvd3/1.8.4/build/nv.d3.css" type="text/css"></link>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/>
<script src="webjars/core-js/client/shim.min.js"></script>
<script src="webjars/zone.js/dist/zone.js"></script>
<script src="webjars/reflect-metadata/0.1.3/Reflect.js"></script>
<script src="webjars/systemjs/dist/system.src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="webjars/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="webjars/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="webjars/jquery-ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="webjars/d3/3.5.17/d3.min.js"></script>
<script src="webjars/nvd3/1.8.4/build/nv.d3.js"></script>
<script src="http://nvd3.org/assets/js/data/stream_layers.js"></script>
<script src="systemjs.config.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js">
</script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js">
</script>
<script>
        System.import('app').catch(function(err){ console.error(err); });
    </script>

</head>
<body>
    <tips-app>
    <h1>Loading...</h1>
    </tips-app>
</body>

</html>

0 个答案:

没有答案
相关问题
最新问题