Angular2應用程序初始加載問題。 typescript.js文件為4.75MB

Question

我將Angular2用於我的J2EE應用程序（Spring MVC）。 我已經實現了延遲加載 ，但是初始加載仍然需要更多時間（大約2分鍾！！ ）。

正在加載兩個大文件：
typescript.js：4.75 MB
editor.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）的大小？

它是一個電子商務應用程序。 所以我應該解決這個問題。 請分享此問題的所有解決方案。

謝謝

Answer 1

我強烈建議您將Angular 2項目更新為Angular 4項目。 Angular 4的功能之一是它最多可縮小60％。 Angular 2和Angular 4是兼容的，有些東西會像typeScript和rxjs一樣會損壞，它們也需要更新。 完成此過程大約需要2到3個小時。

您還可以使用Ahead of Time Compiler進行編譯 ，這也會提高速度。

這是一篇要更新為angular 4的文章，如文章所述，您可以運行以下命令：

（視窗）

npm install @ angular / common @ latest @ angular / compiler @ latest @ angular / compiler-cli @ latest @ angular / core @ latest @ angular / forms @ latest @ angular / http @ latest @ angular / platform-b​​rowser @ latest @angular / platform-b​​rowser-dynamic @ latest @ angular / platform-server @ latest @ angular / router @ latest @ angular / animations @ latest typescript @ latest-保存

（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

祝一切順利！

Answer 2

好吧，據我所知，您無法縮小TypeScript。 但是幾乎沒有其他解決方案，您可以在這里找到：

是否可以將打字稿編譯成精簡代碼？

但是，您還應該檢查您的代碼，並清理所有未使用的方法，導入，...