优化 Angular 供应商输出

Question

在使用 webpack 构建时尝试优化供应商捆绑包，我使用的是 NgcWebpackPlugin。

这是视觉呈现的供应商捆绑包：

令我惊讶的是，即使我们使用 AOT，也存在 angular 编译器模块。

我是否需要以某种方式明确声明我不需要捆绑包中的编译器？还是我错过了什么？

---

这是vendor.ts：

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：

/**
 * 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

在 vendor.ts 中删除 import 'platform-b​​rowser-dynamic' 并在您的 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
     )
  ]
};