[英]Angular2 Application Initial load issue. typescript.js file is 4.75MB
I'm using Angular2 for my J2EE Application (Spring MVC). 我将Angular2用于我的J2EE应用程序(Spring MVC)。 I have implemented Lazy loading , but still its taking more time (around 2 minutes!!! ) to load initially.
我已经实现了延迟加载 ,但是初始加载仍然需要更多时间(大约2分钟!! )。
There have two big sized files are loading : 正在加载两个大文件:
typescript.js : 4.75 MB typescript.js:4.75 MB
compiler.umd.js : 0.98 MB editor.umd.js:0.98 MB
And typescript.js file is not caching. 而且typescript.js文件未缓存。 Every reload its downloading again.
每个重新加载其下载。
My systemjs.config.js file is : 我的systemjs.config.js文件是:
System
.config({
transpiler : 'ts',
typescriptOptions : {
"target" : "es5",
"module" : "commonjs",
"moduleResolution" : "node",
"sourceMap" : true,
"emitDecoratorMetadata" : true,
"experimentalDecorators" : true,
"lib" : [ "es2015", "dom" ],
"noImplicitAny" : true,
"suppressImplicitAnyIndexErrors" : true
},
meta : {
'typescript' : {
"exports" : "ts"
}
},
paths : {
'npm:' : 'uploads/node_modules/'
},
map : {
'app' : 'app',
'@angular/animations' : 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser' : 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/core' : 'npm:@angular/core/bundles/core.umd.js',
'@angular/common' : 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler' : 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser' : 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations' : 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic' : 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http' : 'npm:@angular/http/bundles/http.umd.js',
'@angular/router' : 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade' : 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms' : 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade' : 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static' : 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries using node_modules
'rxjs' : 'npm:rxjs',
'angular-in-memory-web-api' : 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts' : 'npm:plugin-typescript/lib/plugin.js',
'typescript' : 'npm:typescript/lib/typescript.js',
'angular2-datatable' : 'npm:angular2-datatable',
'lodash' : 'npm:lodash/lodash.js',
'angular2-datatable-pagination' : 'npm:angular2-datatable-pagination',
'jquery' : 'lib/jquery/jquery-3.2.0.min.js',
'ngx-pagination' : 'lib/ngxpagination/ngx-pagination.js',
},
packages : {
app : {
defaultExtension : 'ts'
},
rxjs : {
defaultExtension : 'js'
},
'angular2-datatable' : {
main : 'index.js',
defaultExtension : 'js'
}
},
"scripts" : [ "lib/jquery/jquery-3.2.0.min.js" ]
});
Is there any way to reduce the size of these two files (typescript.js,compiler.umd.js) ? 有什么办法可以减小这两个文件(typescript.js,compiler.umd.js)的大小?
Its an e-commerce application. 它是一个电子商务应用程序。 So I should solve this issue.
所以我应该解决这个问题。 Please share any solution for this issue.
请分享此问题的所有解决方案。
Thank You 谢谢
I would strongly suggest that you update your Angular 2 project to an Angular 4 project. 我强烈建议您将Angular 2项目更新为Angular 4项目。 One of Angular 4's features is that it complies to up to 60% smaller.
Angular 4的功能之一是它最多可缩小60%。 Angular 2 and 4 are compatible, there are a few things which will break like typeScript and rxjs which will need to be updated as well.
Angular 2和Angular 4是兼容的,有些东西会像typeScript和rxjs一样会损坏,它们也需要更新。 This took will take about 2 or 3 hours to complete.
完成此过程大约需要2到3个小时。
You can also compile using Ahead Of Time Compiler which will also improve speed a bit. 您还可以使用Ahead of Time Compiler进行编译 ,这也会提高速度。
Here is an article to update to angular 4 As the article says, you can run the command: 这是一篇要更新为angular 4的文章,如文章所述,您可以运行以下命令:
(Windows) (视窗)
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save
npm install @ angular / common @ latest @ angular / compiler @ latest @ angular / compiler-cli @ latest @ angular / core @ latest @ angular / forms @ latest @ angular / http @ latest @ angular / platform-browser @ latest @angular / platform-browser-dynamic @ latest @ angular / platform-server @ latest @ angular / router @ latest @ angular / animations @ latest typescript @ latest-保存
(Linux) (Linux)的
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save
npm install @ angular / {common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations} @latest typescript @ latest --save
All the best! 祝一切顺利!
Well, as far as I know, you can't minify TypeScript. 好吧,据我所知,您无法缩小TypeScript。 But there are few other solutions, as you can find here :
但是几乎没有其他解决方案,您可以在这里找到:
Is it possible to compile typescript into minified code? 是否可以将打字稿编译成精简代码?
But you should also check your code, and clean all unused methods, imports, ... 但是,您还应该检查您的代码,并清理所有未使用的方法,导入,...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.