角度ベンダーの出力を最適化する

Question

webpackを使用してビルドする際にベンダーバンドルを最適化しようとすると、私はNgcWebpackPluginを使用しています。

これは、視覚的に提示し、ベンダーのバンドルです：

私に驚き、何が私たちがAOTを利用していてもカントー角度コンパイラモジュールの存在です。

私はバンドルにコンパイラを必要としないと明示的に宣言する必要がありますか？あるいは私は何か他のものを逃していますか

---

ここ​​です：

import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 
import '@angular/forms' 
import '@angular/animations' 
import 'rxjs'; 
import '@ngrx/core'; 
import '@ngrx/store'; 
import 'platform'; 
import 'underscore'; 
import 'typed-immutable-record'; 
import 'toastr'; 
import 'socket.io-client'; 
import 'moment'; 
import 'moment-timezone'; 
import 'jquery'; 
import 'immutable'; 
import 'humanize-duration'; 
import 'fuzzy'; 
import 'bricklayer'; 
import 'ngx-bootstrap'; 

---

ここboot-aot.tsです：vendor.tsで

/** 
* Angular bootstrapping 
*/ 
import { platformBrowser } from '@angular/platform-browser'; 
import { decorateModuleRef } from './environment'; 
/** 
* App Module 
* our top level module that holds all of our components. 
*/ 
import { AppModuleNgFactory } from '../../compiled/app/src/app.module.ngfactory'; 
/** 
* Bootstrap our Angular app with a top level NgModule. 
*/ 
export function main(): Promise<any> { 
    return platformBrowser() 
    .bootstrapModuleFactory(AppModuleNgFactory) 
    .then(decorateModuleRef) 
    .catch((err) => console.error(err)); 
} 

export function bootstrapDomReady() { 
    document.addEventListener('DOMContentLoaded', main); 
} 

bootstrapDomReady(); 

Answer 1

インポート 'プラットフォーム・ブラウザ・ダイナミック' と、あなたのWebPACKの設定で削除不要なモジュールを手動で削除します。

サンプルのWebPACKの設定：

var empty = { 
    NgProbeToken: {}, 
    HmrState: function() {}, 
    _createConditionalRootRenderer: function(rootRenderer, extraTokens, 
coreTokens) { 
     return rootRenderer; 
    }, 
    __platform_browser_private__: {} 
    }; 

return { 
    module: { 
     rules: [ 
     ({ 
      test: /\.ts$/, 
      use: removeEmpty([ 
      { 
       loader: '@angularclass/hmr-loader', 
       options: { 
       pretty: isDev, 
       prod: isProd 
       } 
      }, 
      { 
       /** 
       * MAKE SURE TO CHAIN VANILLA JS CODE, I.E. TS COMPILATION 
OUTPUT. 
       */ 
       loader: 'ng-router-loader', 
       options: { 
       loader: 'async-import', 
       genDir: 'compiled', 
       aot: isProd 
       } 
      }, 
      { 
       loader: 'awesome-typescript-loader', 
       options: { 
       configFileName: 'tsconfig.webpack.json', 
       useCache: !isProd 
       } 
      }, 
      ifProd(WebpackStrip.loader('console.log', 'console.info', 
'console.error')), 
      { 
       loader: 'angular2-template-loader' 
      } 
      ]), 
      exclude: [/\.(spec|e2e)\.ts$/] 
     }) 
     ] 
    }, 
    plugins: [ 
    new ngcWebpack.NgcWebpackPlugin({ 
     disabled: !isProd, 
     tsConfig: resolve('tsconfig.webpack.json') 
    }), 

    new NormalModuleReplacementPlugin(
     /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/, 
     empty 
    ), 

    new HashedModuleIdsPlugin(), 

    new NormalModuleReplacementPlugin(
     /@angular(\\|\/)upgrade/, 
     empty 
    ), 
    new NormalModuleReplacementPlugin(
     /@angular(\\|\/)compiler/, 
     empty 
    ), 
    new NormalModuleReplacementPlugin(
     /@angular(\\|\/)platform-browser-dynamic/, 
     empty 
    ), 
    new NormalModuleReplacementPlugin(
     /dom(\\|\/)debug(\\|\/)ng_probe/, 
     empty 
    ), 
    new NormalModuleReplacementPlugin(
     /dom(\\|\/)debug(\\|\/)by/, 
     empty 
    ), 
    new NormalModuleReplacementPlugin(
     /src(\\|\/)debug(\\|\/)debug_node/, 
     empty 
    ), 
    new NormalModuleReplacementPlugin(
     /src(\\|\/)debug(\\|\/)debug_renderer/, 
     empty 
    ) 
    ] 
};