javascript - Angular2 लोड पर बहुत अधिक फ़ाइल अनुरोध करता है




typescript systemjs (6)

मैं Angular2 का उपयोग करके एक वेबसाइट बना रहा हूं और मुझे लगता है कि मैं एक मुद्दा हूं। मेरे कोणीय पृष्ठ के पहले लोड पर, SystemJS कोणीय angular2/src निर्देशिका में प्रत्येक Angular2 फ़ाइल को पुनः प्राप्त करने के लिए 500 सौ से अधिक अनुरोध कर रहा है। कुल मिलाकर, पहला लोड 4MB से अधिक डाउनलोड होता है और इसे शुरू होने में 14 सेकंड से अधिक समय लगता है।

मेरे index.html में निम्नलिखित स्क्रिप्ट शामिल हैं:

<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.min.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/lodash/lodash.js"></script>
<script src="libs/bootstrap/js/bootstrap.js"></script>

और मेरा systemJs इनिशियलाइज़ेशन कोड इस तरह दिखता है:

    <script>
      System.config({
        defaultJSExtensions: true,
        paths: {
          '*': 'libs/*',
          'app/*': 'app/*'
        },
        packageConfigPaths: ['libs/*/package.json'],
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));

    </script>

मेरे सार्वजनिक फ़ोल्डर में निम्न संरचना है:

.
├── img
├── styles
├── app
├── libs
|   └── angular2
|   └── systemjs
|   └── rxjs
|   └── jquery
|   └── lodash
|   └── bootstrap
└── index.html

अनुरोध की जा रही कुछ js फ़ाइलों के स्क्रीनशॉट के एक जोड़े:

क्या उन सभी अनुरोधों से बचने का कोई तरीका है?


मेरे कोणीय पृष्ठ के पहले लोड पर, systemjs कोणीय 2 / src निर्देशिका में प्रत्येक कोणीय 2 फ़ाइल को पुनः प्राप्त करने के लिए 500 सौ से अधिक अनुरोध कर रहा है। कुल मिलाकर, पहला लोड 4mb से अधिक डाउनलोड होता है और इसे शुरू होने में 14 से अधिक समय लगता है।

SystemJs वर्कफ़्लो काफी नए हैं और उनमें सर्वश्रेष्ठ तैनाती के लिए पर्याप्त शोध नहीं है।

commonjs + commonjs वापस जाने का commonjs । और अधिक: https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html

यहाँ एक उदाहरण है: github.com/AngularClass/angular2-webpack-starter


@ FreeBird72 आपका जवाब बहुत बढ़िया है।

यदि आप विकास के लिए SystemJS का उपयोग करना चाहते हैं और मैं जैसे उत्पादन सर्वर को गति देता हूं। इसकी जांच करें।

नोट: केवल आपके द्वारा उपयोग किए जाने वाले घटकों को आयात करें, पूरे पैकेज से आयात न करें।

जैसे: यदि आप ng2-बूटस्ट्रैप से मोडल का उपयोग करना चाहते हैं।

import {MODAL_DIRECTIVES} from "ng2-bootstrap/components/modal";

के बजाय:

import {MODAL_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";

यह संपूर्ण ng2-बूटस्ट्रैप के बजाय मोडल घटक आयात करेगा

फिर @ FreeBird72 से जवाब का पालन करें

इस पैकेज को जोड़ें

{
  ...
  "scripts": {
    ...
    "prod": "npm run tsc && npm run browserify",
    "browserify": "browserify -s main  dist/main.js > dist/bundle.js && npm run minify",
    "minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",
    ...
  },
  "devDependencies": {
    ...
    "browserify": "^13.0.1",    
    "uglifyjs": "^2.4.10",
    ...
  }
  ...
}

फिर आप विकास पर npm run tsc सकते हैं और उत्पादन सर्वर पर npm run prod प्रोडक्ट कर सकते हैं। साथ ही System.import(.... को अपने index.html से हटा दें और इसे <script src="/dist/bundle.min.js"></script>


मुझे mgechev के कोणीय 2-सीरीज़ रिपॉजिटरी पर ब्राउजर और uglifyjs का उपयोग करके एक सरल समाधान मिला

यहाँ मेरा संस्करण है:

pacakge.json:

{
...
  "scripts": {
      "build_prod": "npm run clean && npm run browserify",
      "clean": "del /S/Q public\\dist",
      "browserify": "browserify -s main  public/YourMainModule.js > public/dist/bundle.js && npm run minify",
      "minify": "uglifyjs public/dist/bundle.js --screw-ie8 --compress --mangle --output public/dist/bundle.min.js"
    },
...
  "devDependencies": {
      "browserify": "^13.0.1",    
      "typescript": "^1.9.0-dev.20160625-1.0",
      "typings": "1.0.4",
      "uglifyjs": "^2.4.10"
    }
}
  1. अपना प्रोजेक्ट बनाएं।
  2. रन: npm रन build_prod यह public_ dist डायरेक्टरी के तहत bundle.js & bundle.min.js बनाएगा।
  3. अपनी index.html फ़ाइल संपादित करें: System.import('YourMainModule')... , चलाने के बजाय System.import('YourMainModule')... , <script src="/dist/bundle.min.js"></script>

मुझे ठीक वैसी ही समस्या थी, वास्तव में एक उत्तर के लिए इस पोस्ट को देख रहा था। यहाँ मैंने समस्या को हल करने के लिए क्या किया।

  1. वेबपैक का उपयोग करने के लिए अपनी परियोजना को संशोधित करें। इस छोटे ट्यूटोरियल का पालन करें: Angular2 QuickStart SystemJS Webpack के लिए
  2. यह विधि आपको एक एकल जावास्क्रिप्ट फ़ाइल देगी, लेकिन यह काफी बड़ी है (मेरी परियोजना फ़ाइल 5 एमबी से अधिक थी) और इसे छोटा करने की आवश्यकता है। ऐसा करने के लिए मैंने webpack Globaly स्थापित किया है: npm install webpack -g । एक बार इंस्टॉल होने के बाद, वेब एप्स को अपने एप्स रूट डायरेक्टरी से चलाएं। इसने मेरी फ़ाइल का आकार लगभग 700KB कर दिया

20 सेकंड और 350 अनुरोधों से नीचे 3 सेकंड और 7 अनुरोधों तक।


मैं AG2 RC संस्करण का उपयोग कर रहा हूँ जबकि Systemjs-builder के साथ MrCroft के समाधान का उपयोग करते हुए, मैं बहुत सारे मुद्दों को मार रहा था जैसे: त्रुटि TS2304: नाम नहीं ढूँढ सकता 'मैप' त्रुटि TS2304: नाम नहीं ढूँढ सकता 'वादा' ...

कई कोशिशों के बाद, मैंने जोड़ा: ///<reference path="../../typings/index.d.ts" /> को अपने boot.ts में और अब मुझे अपनी बंडल फ़ाइल संकलित मिल गई।


मैं देखता हूं कि आपके पास पहले से ही एक प्रतिक्रिया है, जो निश्चित रूप से अच्छा है। उन लोगों के लिए लेकिन जो सिस्टमज का उपयोग करना चाहते हैं (जैसे मैं भी करता हूं), और वेबपैक पर न जाएं, आप अभी भी फाइलों को बंडल कर सकते हैं। हालाँकि, इसमें एक अन्य टूल (मैं gulp का उपयोग करता हूं) का उपयोग करना शामिल है। इसलिए ... आपके पास फ़ोलोइंग सिस्टमजन्स कॉन्फ़िगरेशन होगा (html में नहीं, बल्कि एक अलग फ़ाइल में - चलो इसे "system.config.js" कहते हैं):

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                        'dist/app', // this is where your transpiled files live
        'rxjs':                       'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', // this is something new since angular2 rc.0, don't know what it does
        '@angular':                   'node_modules/@angular'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'boot.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' }
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        //'@angular/router', // I still use "router-deprecated", haven't yet modified my code to use the new router that came with rc.0
        '@angular/router-deprecated',
        '@angular/http',
        '@angular/testing',
        '@angular/upgrade'
    ];

    // 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
    };

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);
})(this);

फिर, अपने gulpfile.js में आप इस तरह एक बंडल बनाएंगे ( system.config.js और tsconfig.json फ़ाइलों से जानकारी का उपयोग करके):

var gulp = require('gulp'),
    path = require('path'),
    Builder = require('systemjs-builder'),
    ts = require('gulp-typescript'),
    sourcemaps  = require('gulp-sourcemaps');

var tsProject = ts.createProject('tsconfig.json');

var appDev = 'dev/app'; // where your ts files are, whatever the folder structure in this folder, it will be recreated in the below 'dist/app' folder
var appProd = 'dist/app';

/** first transpile your ts files */
gulp.task('ts', () => {
    return gulp.src(appDev + '/**/*.ts')
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(ts(tsProject))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(appProd));
});

/** then bundle */
gulp.task('bundle', function() {
    // optional constructor options
    // sets the baseURL and loads the configuration file
    var builder = new Builder('', 'dist/system.config.js');

    /*
       the parameters of the below buildStatic() method are:
           - your transcompiled application boot file (the one wich would contain the bootstrap(MyApp, [PROVIDERS]) function - in my case 'dist/app/boot.js'
           - the output (file into which it would output the bundled code)
           - options {}
    */
    return builder
        .buildStatic(appProd + '/boot.js', appProd + '/bundle.js', { minify: true, sourceMaps: true})
        .then(function() {
            console.log('Build complete');
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
});

/** this runs the above in order. uses gulp4 */
gulp.task('build', gulp.series(['ts', 'bundle']));

इसलिए, "गल्प बिल्ड" को चलाते समय, आपको अपनी ज़रूरत की हर चीज़ के साथ "बंडल" जेएस फाइल मिल जाएगी। ज़रूर, इस काम के लिए आपको इस बंडल बंडल कार्य के लिए कुछ और पैकेजों की भी आवश्यकता है:

npm install --save-dev github:gulpjs/gulp#4.0 gulp-typescript gulp-sourcemaps path systemjs-builder

इसके अलावा, सुनिश्चित करें कि आपके tsconfig.json में "module":"commonjs" । यहाँ मेरा tsconfig.json है जो कि मेरे 'ts' gulp कार्य में उपयोग किया जाता है:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

फिर, अपनी html फ़ाइल में आपको केवल इसे शामिल करना होगा:

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="dist/app/bundle.js"></script>

और यह बात है ... मैं 600 अनुरोधों से मिला, 4mb लगभग 5 सेकंड में ... 20 अनुरोधों के लिए, 1.6 सेकंड में 1.4mb (स्थानीय विकास मशीन)। लेकिन इन 20 निवेदन ~ 1.6 सेकंड में 1.4mb में कुछ अन्य js और css भी शामिल हैं, जो कि थीम थीम प्लस के साथ आए थे कुछ html टेम्पलेट जो पहले लोड पर आवश्यक होते हैं, मैं बाहरी टेम्पलेट्स का उपयोग करना पसंद करता हूं - templateUrl: '', इसके बजाय मेरे इनलाइन फ़ाइल में लिखे गए इनलाइन वाले। ज़रूर, एक ऐप के लिए जिसमें लाखों उपयोगकर्ता होंगे, यह अभी भी पर्याप्त नहीं होगा। प्रारंभिक लोड और कैश सिस्टम के लिए सर्वर-साइड रेंडरिंग को भी लागू किया जाना चाहिए, मैं वास्तव में कोणीय सार्वभौमिक के साथ ऐसा करने में कामयाब रहा, लेकिन Angular2 बीटा (लगभग 200-240 मिलीसेकंड पर उसी एडमिन ऐप के शुरुआती रेंडर को लोड करने में लिया गया जो ऊपर 1.6 लेता है। सेकंड - मुझे पता है: वाह! )। अब यह असंगत है क्योंकि एंगुलर 2 आरसी बाहर आया था, लेकिन मुझे यकीन है कि सार्वभौमिक करने वाले लोग इसे जल्द ही गति प्राप्त करेंगे, विशेष रूप से एनजी-कॉन्फिडेंस आने के बाद से। इसके अलावा, वे PHP, ASP और कुछ अन्य के लिए कोणीय यूनिवर्सल बनाने की योजना भी बना रहे हैं - अभी यह केवल Nodejs के लिए है।

संपादित करें: वास्तव में, मुझे पता चला है कि NG-CONF पर उन्होंने कहा कि कोणीय यूनिवर्सल पहले से ही ASP का समर्थन करता है (लेकिन यह Angular2> Beta.15 :) का समर्थन नहीं करता है ...) लेकिन चलो उन्हें कुछ समय दें, RC अभी आया कुछ दिन पहले बाहर





systemjs