我正在部署一个网站,但是由于使用的是Angular的最终版本,所以我无法“捆绑” rxjs。
我只能通过在我的网站上复制整个文件夹 node_modules/rxjs 来部署rxjs。
这是我对SystemJS的配置
System.config({
map: {
'lodash':'http://127.0.0.1/js/lodash.min.js',
'@angular/core': 'http://127.0.0.1/js/core.umd.min.js',
'@angular/compiler': 'http://127.0.0.1/js/compiler.umd.min.js',
'@angular/common': 'http://127.0.0.1/js/common.umd.min.js',
'@angular/http': 'http://127.0.0.1/js/http.umd.min.js',
'@angular/platform-browser': 'http://127.0.0.1/js/platform-browser.umd.min.js',
'@angular/platform-browser-dynamic': 'http://127.0.0.1/js/platform-browser-dynamic.umd.min.js',
'@angular/router': 'http://127.0.0.1/js/router.umd.min.js',
'@angular/forms': 'http://127.0.0.1/js/forms.umd.min.js',
'@angular/upgrade': 'http://127.0.0.1/js/upgrade/bundles/upgrade.umd.js',
'rxjs':'http://127.0.0.1/js/vendors.bundle.js'
},
packages: {
'/js': {
defaultExtension: 'js'
}
},
bundles: {
'/js/app.bundle': ['main']
}
});
document.addEventListener('DOMContentLoaded', function () {
System.import('main').then(null, console.error.bind(console));
});
我使用以下Gulp脚本将rxjs包括在 vendor.bundle.js 中:
gulp.task('vendor.bundle', function() {
gulp.src([
'node_modules/systemjs/dist/system-polyfills.js',
'node_modules/zone.js/dist/zone.min.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/rxjs/bundles/Rx.min.js'
])
.pipe(concat('vendors.bundle.js'))
//.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
我有以下错误:
这是一个问题,因为当我们部署整个文件夹时,会生成大量的请求来获取所有rxjs/*。js文件,这意味着主要在移动设备上的性能不佳。
当我仅部署 Rx.min.js 文件时,我没有出现perfs问题。
有人可以告诉我如何使用Angular 2.2 et SystemJS部署 rxjs 吗?
最佳答案
谢谢@martin! :)
解决方法如下:
1.使用Gulp(在我的情况下)和构建自己的Rx.min.js system.js-builder
var SystemBuilder = require('systemjs-builder');
gulp.task('rxjs.bundle', function () {
var builder = new SystemBuilder('./', {
paths: {"rxjs/*": "node_modules/rxjs/*.js"},
map: {"rxjs": "node_modules/rxjs"},
packages: {"rxjs": {main: 'Rx.js', defaultExtension: "js"}}
});
builder.bundle('rxjs', 'dist/js/Rx.min.js', {
sourceMaps: true,
minify: true,
mangle: true
});
});
2.在您的 SystemJS配置文件中声明您的软件包。
System.config({
map: {
'lodash':'http://127.0.0.1/js/lodash.min.js',
'@angular/core': 'http://127.0.0.1/js/core.umd.min.js',
'@angular/compiler': 'http://127.0.0.1/js/compiler.umd.min.js',
'@angular/common': 'http://127.0.0.1/js/common.umd.min.js',
'@angular/http': 'http://127.0.0.1/js/http.umd.min.js',
'@angular/platform-browser': 'http://127.0.0.1/js/platform-browser.umd.min.js',
'@angular/platform-browser-dynamic': 'http://127.0.0.1/js/platform-browser-dynamic.umd.min.js',
'@angular/router': 'http://127.0.0.1/js/router.umd.min.js',
'@angular/forms': 'http://127.0.0.1/js/forms.umd.min.js',
'@angular/upgrade': 'http://127.0.0.1/js/upgrade/bundles/upgrade.umd.js'
},
packages: {
'/js': {
defaultExtension: 'js'
}
},
bundles: {
'/js/Rx.min.js': [
"rxjs/*",
"rxjs/operator/*",
"rxjs/observable/*",
"rxjs/add/operator/*",
"rxjs/add/observable/*",
"rxjs/util/*"
],
'/js/app.bundle': ['main']
}
});
document.addEventListener('DOMContentLoaded', function () {
System.import('main').then(null, console.error.bind(console));
});
伟大的马丁,我付出了很多努力,而解决方案却是经过很长时间的讨论而得出的。我完全想念它:)
更新!
在测试了该解决方案之后,我可以确认性能得到了极大的提高!!加载我的主页的时间大约是15秒,现在只有3秒!
关于Angular 2.2和SystemJS : deploy RXJS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41102541/