Angular 2部署SystemJS和Gulp太重了

我一直在用Angular開發一段時間，但是我剛剛開始使用Angular 2，並且在完成Angular 2教程的快速入門之後，想到了試圖開發完成的應用程序在生產模式下的服務器中。Angular 2部署SystemJS和Gulp太重了

我沒有SystemJS和Gulp的經驗，所以它花了我一段時間，但我終於設法使它工作。現在我有兩個問題：

對於Hello World應用程序，它真的很重，大約20MB，因爲我必須從Angular 2庫下載大量文件。我的猜測是我並不需要這麼多，但儘管我只使用@ angular/core和@ angular/platform-browser-dynamic（這是我的應用程序ts文件中引用的那些），但角度在部署中一直拋出錯誤消息直到我包含整個@angular庫。

另一方面，當我運行應用程序時，我再次看到正在下載的許多單個文件，這不是我想到的。必須有一種方法只下載一個包含所有庫（一個包）的單個（縮小）文件，但我不知道該怎麼做。

任何人都可以幫我一個忙嗎？

這是我的主要配置文件。

system.config.js

(function(global) { 

    // map tells the System loader where to look for things 
    var map = { 
    'app': 'app', // 'dist', 
    '@angular': 'lib/@angular', 
    'rxjs': 'lib/rxjs' 
    }; 

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

    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic' 
    ]; 
    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
    packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    // Add package entries for angular packages 
    ngPackageNames.forEach(packIndex); 

    var config = { 
    map: map, 
    packages: packages 
    }; 

    System.config(config); 

})(this);

的index.html

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <link rel="stylesheet" href="./css/styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="lib/shim.min.js"></script> 
    <script src="lib/zone.js"></script> 
    <script src="lib/Reflect.js"></script> 
    <script src="lib/system.src.js"></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>Loading...</my-app> 
    </body> 
</html>

gulpfile.js

var gulp = require('gulp'); 
var ts = require('gulp-typescript'); 
const babel = require('gulp-babel'); 

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

gulp.task('babel-dp', ['resources', 'babel']); 
gulp.task('ts-dp', ['resources', 'ts']); 

gulp.task('resources',() => { 
    gulp.src([ 
    'node_modules/core-js/client/shim.min.js', 
    'node_modules/zone.js/dist/zone.js', 
    'node_modules/reflect-metadata/Reflect.js', 
    'node_modules/systemjs/dist/system.src.js' 
    ]).pipe(gulp.dest('web/lib')); 

    gulp.src([ 
    'node_modules/@angular/**/*', 
    ]).pipe(gulp.dest('web/lib/@angular')); 

    gulp.src([ 
    'node_modules/rxjs/**/*', 
    ]).pipe(gulp.dest('web/lib/rxjs')); 

    gulp.src([ 
    'app/**/*.js' 
    ]).pipe(gulp.dest('web/app')); 

    gulp.src([ 
    'styles.css' 
    ]).pipe(gulp.dest('web/css')); 

    gulp.src([ 
    'index.html', 
    'systemjs.config.js', 
    'favicon.ico' 
    ]).pipe(gulp.dest('web')); 
}); 

gulp.task('babel',() => { 
    return gulp.src([ 
    'app/**/*.ts' 
    ]) 
     .pipe(babel({presets: ['es2015']})) 
     .pipe(gulp.dest('web/js')); 
}); 

gulp.task('ts', function(done) { 
    var tsResult = tsProject.src([ 
     'app/**/*.ts' 
    ]) 
    .pipe(ts(tsProject)); 
    return tsResult.js.pipe(gulp.dest('web/js')); 
});

讓我知道如果你需要任何其他文件。非常感謝！

UPDATE

我剛剛發現我可以使用umd.min.js文件內@angular而不是單個的JS文件。這是從20到5MB的東西，但仍然看起來相當多，當縮小版本的Angular 1小於1MB時。另一方面，即使我使用了這些umd.min.js文件，chrome在加載應用程序時仍然下載單個文件。

更新2

我設法創建一個使用systemjs建設者作爲意見提出一個單一的包文件。現在，我有我的所有應用程序代碼的單個文件bundle.app.js，和我的index.html現在看起來是這樣

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <!-- 1. Load libraries --> 
    <script src="app/bundle.app.js"> </script> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/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="node_modules/systemjs/dist/system.src.js"></script> 
    <script> 
     System.import('app').catch(function(err) { console.error(err); }); 
    </script> 
    </head> 
    <!-- 2. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

但現在鉻不容找到在HTML中導入的JS：shim.min。 js，zone.js，Reflect.js和system.src.js。我在systemjs.config.js中添加了一行以包含node_modules以防萬一，但我不認爲這是必需的。無論如何，它也不起作用。不應該將這些進口品包含在包裝中嗎？

來源

2016-07-07 David

好吧，我終於得到了一個工作配置，所以我會在這裏複製所有需要的文件，以防有人發現它有幫助。

的index.html

<html> 
    <head> 
    <title>Angular 2 QuickStart Deploy</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="lib/shim.min.js"></script> 
    <script src="lib/zone.js"></script> 
    <script src="lib/Reflect.js"></script> 
    <script src="lib/system.src.js"></script> 
    </head> 
    <!-- 2. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    <!-- application bundle --> 
    <script src="app/bundle.app.js"></script> 
    </body> 
</html>

gulpfile.js

const gulp = require('gulp'); 
const ts = require('gulp-typescript'); 
const babel = require('gulp-babel'); 
const Builder = require('systemjs-builder'); 

// systemjs-builder 
const builder = new Builder('.', 'systemjs.config.js'); 

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

gulp.task('babel-dp', ['resources', 'babel']); 
gulp.task('ts-dp', ['resources', 'ts']); 

gulp.task('bundle:app',() => { 
    builder.buildStatic('app/*.js', 'web/app/bundle.app.js') 
    .then(function() { 
    console.log('Build complete'); 
    }) 
    .catch(function(err) { 
    console.log('error ' + err); 
    }) 
}) 

gulp.task('resources',() => { 
    gulp.src([ 
    'node_modules/core-js/client/shim.min.js', 
    'node_modules/zone.js/dist/zone.js', 
    'node_modules/reflect-metadata/Reflect.js', 
    'node_modules/systemjs/dist/system.src.js' 
    ]).pipe(gulp.dest('web/lib')); 

    gulp.src([ 
    'styles.css' 
    ]).pipe(gulp.dest('web/css')); 

    gulp.src([ 
    'index.html', 
    'favicon.ico' 
    ]).pipe(gulp.dest('web')); 
}); 

gulp.task('babel',() => { 
    return gulp.src([ 
    'app/**/*.ts' 
    ]) 
     .pipe(babel({presets: ['es2015']})) 
     .pipe(gulp.dest('web/js')); 
}); 

gulp.task('ts', function(done) { 
    var tsResult = tsProject.src([ 
     'app/**/*.ts' 
    ]) 
    .pipe(ts(tsProject)); 
    //return tsResult.js.pipe(gulp.dest('web/js')); 
    return tsResult.js.pipe(gulp.dest('app/js')); 
});

文件的其餘部分並沒有改變。這裏的主要觀點是使用systemjs-builder創建包（感謝@Thorsten的提示）以及在index.html中使用包。

來源

2016-07-07 13:19:23 David

至於捆綁單個文件中的多個文件/庫，您可以使用gulp任務。

這是讓你開始的東西。一定要了解不同的線條意味着什麼，可能會發生，你必須改變一些小件以反映你的需求。

const gulp = require('gulp'); 
const path = require('path'); 
const runSequence = require('run-sequence'); 
const paths = require('../paths'); 

gulp.task('bundle', cb => { 
    runSequence(
     'bundle:app', 
     'bundle:vendor', 
     cb 
    ); 
}); 

const app = 'app/**/*.js'; 
const specs = 'app/**/*.spec.js'; 

gulp.task('bundle:app',() => { 
    const appModules = `[${app}] - [${specs}]`; // except specs 
    return bundle(appModules, paths.dst + '/bundle.app.js', { baseUrl: paths.dst }); 
}); 

gulp.task('bundle:vendor',() => { 
    // build app and remove the app code - this leaves only 3rd party dependencies 
    const dstApp = path.join(paths.dst, app); 
    const dstSpecs = path.join(paths.dst, specs); 
    const vendorModules = `${dstApp} - [${dstApp}]`; 

    return bundle(vendorModules, paths.dst + '/bundle.vendor.js'); 
}); 

function bundle(src, dst, opt) {   
    const bundleOptions = Object.assign({ 
     baseUrl: '.', 
     minify: false, 
     sourceMaps: false, 
     lowResSourceMaps: false, // mapping granularity is per-line instead of per-character 
    }, opt); 

    const Builder = require('systemjs-builder'); 
    const builder = new Builder(bundleOptions.baseUrl, paths.src + '/systemjs.config.js'); 

    return builder.bundle(src, dst, bundleOptions); 
}

縮小是額外的步驟，但gulp-minify或gulp-uglify值得一看。

來源

2016-07-07 06:02:42

hi @Thorsten Viel，我設法使用你的gulp文件的簡化版本來創建一個包，但我正在努力處理index.html中的導入;即我現在已經有這個''，瀏覽器不能找到它，不應該將它包含在該包中？ – David

gulp捆綁了systemjs.config.js中引用的內容。 Shim不是通常的一部分。對於區域或polyfills例如因此，在您的index.html中使用直接引用，而非捆綁/打包的js是正確的。 –

因爲我還不能評論這個問題（低repu）：「我剛剛發現我可以在@angular裏面使用umd.min.js文件而不是單個js文件，這是從20到5MB，但是當Angular 1的縮小版本小於1MB時仍然看起來相當多。「你在輸入什麼？你可以分享你的systemjs.config.js嗎？我與幾個角色和第三方軟件包捆綁僅1.6MB。 –

Angular 2部署SystemJS和Gulp太重了

回答

相關問題