我正在使用Angular2
创建一个网站,而我正在使用我认为的问题。在我的角度页面的第一次加载时,SystemJS
正在发出超过500个请求来检索Angular2
目录中的每个angular2/src
文件。总的来说,第一个负载下载超过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
有没有办法避免所有这些请求?
答案 0 :(得分:47)
我有完全相同的问题,实际上正在看这篇文章的答案。以下是我为解决问题所做的工作。
npm install webpack -g
。安装后,从您的应用程序根目录运行webpack -p
。这使我的文件大小降低到大约700KB 从20秒和350个请求到3秒和7个请求。
答案 1 :(得分:33)
我看到你已经有了回复,当然这很好。 对于那些想要使用 systemjs (我也喜欢)的人,而不是去webpack,你仍然可以捆绑文件。但是,它确实涉及使用另一个工具(我使用gulp)。 所以......你会得到以下的systemjs配置(不是在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']));
因此,在运行“gulp build”时,您将获得“bundle.js”文件,其中包含您需要的所有内容。 当然,您还需要更多的软件包才能使用这个gulp bundle任务:
npm install --save-dev github:gulpjs/gulp#4.0 gulp-typescript gulp-sourcemaps path systemjs-builder
另外,请确保在tsconfig.json中有"module":"commonjs"
。
这是我的'ts'
gulp任务中使用的tsconfig.json:
{
"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个请求,大约5秒内4mb ...到20个请求,1.6个1.6mb(本地开发机器)。但这些20个请求在1.6秒内~1.4mb还包括管理主题附带的一些其他js和css以及第一次加载时需要的几个html模板,我更喜欢使用外部模板 - templateUrl:'',而不是内联的,用我的component.ts文件编写。 当然,对于拥有数百万用户的应用程序,这仍然是不够的。应该实现初始加载和缓存系统的服务器端渲染,我实际上设法使用角度通用,但在Angular2 beta(花费 200-240毫秒来加载初始渲染的相同的管理员应用程序,上面需要1.6秒 - 我知道:哇!)。现在它与Angular2 RC出来后不相容,但我确信那些做普及的人会很快加速,特别是因为ng-conf即将到来。此外,他们还计划为PHP,ASP和其他一些人制作Angular Universal - 现在它只适用于Nodejs。
修改强> 实际上,我刚刚发现在NG-CONF上他们说Angular Universal已经支持ASP(但它不支持Angular2&gt; beta.15 :))...但是让我们给他们一些时间,RC刚出来几天前
答案 2 :(得分:3)
我认为你的问题与这个问题有关:
要准备好生产(并加快速度),你需要打包它。
我的意思是将所有文件转换为JavaScript文件,并以与Angular2相同的方式连接它们。这样,您将在单个JS文件中包含多个模块。这样,您将减少将应用程序代码加载到浏览器中的HTTP调用次数。
答案 3 :(得分:3)
我找到了一个简单的解决方案,使用browserify&amp; uglifyjs mgechev's angular2-seed repository
这是我的版本:
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"
}
}
index.html
文件:
而不是运行System.import('YourMainModule')... ,
添加<script src="/dist/bundle.min.js"></script>
答案 4 :(得分:1)
在我的角度页面的第一次加载时,systemjs正在发出超过500个请求来检索angular2 / src目录中的每个angular2文件。总的来说,第一次加载下载超过4mb,启动时间超过14秒。
SystemJs工作流程相当新,并且没有足够的研究来实现最佳部署。
建议返回commonjs
+ webpack
。更多:https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html
以下是一个示例:https://github.com/AngularClass/angular2-webpack-starter
答案 5 :(得分:1)
@FreeBird72你的答案很棒。
如果您想使用SystemJS进行开发并像我一样加速生产服务器。看看这个。
注意:仅导入您使用的组件,请勿从整个软件包导入。
例如:如果你想使用ng2-bootstrap中的Modal。
import {MODAL_DIRECTIVES} from "ng2-bootstrap/components/modal";
而不是:
import {MODAL_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";
这将导入模态组件而不是整个ng2-bootstrap
然后按照@FreeBird72
的回答添加此package.json
{
...
"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
同时从index.html中删除System.import(....
并将其更改为<script src="/dist/bundle.min.js"></script>
答案 6 :(得分:0)
如果您想坚持使用SystemJS,可以将应用与JSPM捆绑在一起。到目前为止,我已经取得了很好的成功,使用JSPM的bundle-sfx
命令为Angular 2应用程序制作单个JS文件。
this Gist中有一些有用的信息,而seed project.
答案 7 :(得分:0)
我正在使用AG2 RC版本 在使用MrCroft的systemjs-builder解决方案时,我遇到了很多问题,例如: 错误TS2304:找不到名称&#39; Map&#39; 错误TS2304:找不到姓名&#39;承诺&#39; ...
经过多次尝试,我补充道:
///<reference path="../../typings/index.d.ts" />
进入我的boot.ts,现在我编译了我的捆绑文件。
答案 8 :(得分:0)
Angular命令行界面现在支持捆绑(使用树摇动以从导入中删除未使用的代码),缩小和提前模板编译,这不仅极大地减少了请求的数量,而且使得捆绑很小。它使用下面的WebPack。
使用它制作生产构建非常容易:
ng build --prod --aot