优化 Angular 供应商输出 [英] Optimize Angular vendor output

问题描述

在使用 webpack 构建时尝试优化供应商包，我使用了

令我惊讶的是，即使我们正在使用 AOT，Angular 编译器模块的存在也是如此.

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

<小时>

这是vendor.ts:

import '@angular/platform-b​​rowser';导入'@angular/platform-b​​rowser-dynamic';导入'@angular/core';导入'@angular/common';导入'@angular/http';导入'@angular/路由器';导入'@angular/forms'导入'@angular/animations'导入'rxjs'；导入'@ngrx/core';导入'@ngrx/store';导入平台"；导入下划线"；导入 'typed-immutable-record';导入'toastr'；导入'socket.io-client';导入时刻"；导入时刻时区"；导入'jquery';导入不可变"；导入人性化持续时间"；导入模糊"；进口砖匠"；导入'ngx-bootstrap'；

<小时>

这是boot-aot.ts:

/*** 角度引导*/从@angular/platform-b​​rowser"导入{平台浏览器}；从'./environment'导入{decorateModuleRef}；/*** 应用模块* 包含所有组件的顶级模块.*/import { AppModuleNgFactory } from '../../compiled/app/src/app.module.ngfactory';/*** 使用顶级 NgModule 引导我们的 Angular 应用程序.*/导出函数 main(): Promise{返回平台浏览器().bootstrapModuleFactory(AppModuleNgFactory).then(decorateModuleRef).catch((err) => console.error(err));}导出函数 bootstrapDomReady() {document.addEventListener('DOMContentLoaded', main);}bootstrapDomReady();

解决方案

在 vendor.ts 中删除 import 'platform-b​​rowser-dynamic' 并在您的 webpack 配置中手动删除不需要的模块.

示例 webpack 配置:

var empty = {NgProbeToken:{}，HmrState: function() {},_createConditionalRootRenderer:函数(rootRenderer，extraTokens，核心令牌){返回根渲染器；},__platform_browser_private__:{}};返回 {模块: {规则: [({测试:/\.ts$/,使用:removeEmpty([{loader: '@angularclass/hmr-loader',选项: {漂亮:isDev，产品:isProd}},{/*** 确保链接 VANILLA JS 代码，即ts 汇编输出.*/loader: 'ng-router-loader',选项: {加载器:'异步导入'，genDir: '编译',aot: isProd}},{loader: 'awesome-typescript-loader',选项: {configFileName: 'tsconfig.webpack.json',useCache: !isProd}},ifProd(WebpackStrip.loader('console.log', 'console.info','console.error')),{加载器:'angular2-template-loader'}]),排除:[/\.(spec|e2e)\.ts$/]})]},插件: [新的 ngcWebpack.NgcWebpackPlugin({禁用:！isProd，tsConfig: resolve('tsconfig.webpack.json')}),新的 NormalModuleReplacementPlugin(/zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,空的),新的 HashedModuleIdsPlugin(),新的 NormalModuleReplacementPlugin(/@angular(\\|\/)upgrade/,空的),新的 NormalModuleReplacementPlugin(/@angular(\\|\/)compiler/,空的),新的 NormalModuleReplacementPlugin(/@angular(\\|\/)platform-b​​rowser-dynamic/,空的),新的 NormalModuleReplacementPlugin(/dom(\\|\/)debug(\\|\/)ng_probe/,空的),新的 NormalModuleReplacementPlugin(/dom(\\|\/)debug(\\|\/)by/,空的),新的 NormalModuleReplacementPlugin(/src(\\|\/)debug(\\|\/)debug_node/,空的),新的 NormalModuleReplacementPlugin(/src(\\|\/)debug(\\|\/)debug_renderer/,空的)]};

In trying to optimize the vendor bundle when building with webpack, I'm using the NgcWebpackPlugin.

This is the vendor bundle visually presented:

What surprises me is the presence of the angular compiler module even tho we are utilizing AOT.

Do I need to somehow explicitly declare that I don't need the compiler in the bundle? Or am I missing something else?

---

Here's the 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';

---

Here's the 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();

解决方案

In vendor.ts remove import 'platform-browser-dynamic' and in your webpack config manually remove unneeded modules.

Sample webpack config:

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

这篇关于优化 Angular 供应商输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！