Angular2应用程序初始加载问题。 typescript.js文件是4.75MB

时间:2017-09-26 08:07:43

标签: javascript node.js angular angular2-routing angular2-template

我在我的J2EE应用程序(Spring MVC)中使用Angular2。我已经实现了延迟加载,但仍需要花费更多时间(大约 2分钟!!! )来加载。

有两个大尺寸的文件正在加载:
typescript.js:4.75 MB
compiler.umd.js:0.98 MB

而且typescript.js文件不是缓存。每次重新加载下载。

我的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" ]
        });

有没有办法减少这两个文件的大小(typescript.js,compiler.umd.js)?

它是一个电子商务应用程序。所以我应该解决这个问题。请分享此问题的任何解决方案。

谢谢

2 个答案:

答案 0 :(得分:2)

我强烈建议您将Angular 2项目更新为Angular 4项目。 Angular 4的一个特点是它可以减少高达60%。 Angular 2和4是兼容的,有一些东西会像typeScript和rxjs那样破坏,这些东西也需要更新。这需要大约2或3个小时才能完成。

您也可以使用Ahead Of Time Compiler进行编译,这也会提高速度。

Here is an article to update to 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-server @ latest @ angular / router @ latest   @ angular / animations @ latest typescript @ latest --save

(Linux)的

  

npm install @ angular / {common,compiler,compiler-cli,core,forms,http,platform-b​​rowser,platform-b​​rowser-dynamic,platform-server,router,animations} @latest typescript @ latest --save < / p>

一切顺利!

答案 1 :(得分:0)

嗯,据我所知,你不能缩小TypeScript。但是你可以在这里找到其他解决方案:

Is it possible to compile typescript into minified code?

但您还应检查您的代码,并清除所有未使用的方法,导入......