Question

目前我正在研究该项目angular2-webpack-starter。其webpack.config.js有两个条目：main.ts和vendor.ts。

main.ts

import {provide} from 'angular2/core';
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';

import {App} from './app/app';

document.addEventListener('DOMContentLoaded', function main() {
  bootstrap(App, [
    ...('production' === process.env.ENV ? [] : ELEMENT_PROBE_PROVIDERS),
    ...HTTP_PROVIDERS,
    ...ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
  ])
  .catch(err => console.error(err));
});

vendor.ts

// Polyfills
import 'es6-shim';
// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here)
import 'es6-promise';
import 'zone.js/lib/browser/zone-microtask';

if ('production' !== process.env.ENV) {
  // Reflect Polyfill
  require('es7-reflect-metadata/dist/browser');
  Error['stackTraceLimit'] = Infinity;
  Zone['longStackTraceZone'] = require('zone.js/lib/zones/long-stack-trace.js');
}

if ('production' === process.env.ENV) {
  // Reflect with es7-reflect-metadata/reflect-metadata is added
  // by webpack.prod.config ProvidePlugin
  let ngCore = require('angular2/core');
  ngCore.enableProdMode();
}
// Angular 2
import 'angular2/platform/browser';
import 'angular2/platform/common_dom';
import 'angular2/router';
import 'angular2/http';
import 'angular2/core';

// RxJS
import 'rxjs';

我理解vendor.js是导入依赖项。但是为什么在这里导入angular2模块？由于它们也被导入其他文件（例如main.ts），似乎没有必要两次或提前导入它们。

Answer 1

我想我明白了。根据webpack的代码拆分文章，在Split app and vendor code section中解释了供应商文件中导入的所有依赖项都将从主数据包中排除。

这将从app chunk中删除供应商块中的所有模块。现在，bundle.js将只包含您的应用程序代码，而不包含任何依赖项。它们位于vendor.bundle.js。

这样你的bundle文件会更干净，因为所有的角度代码和所有其他库代码都将在另一个供应商文件中分开。

导入整个模块之前导入整个模块有什么好处吗？

1 个答案: