角2和巨大的WebPack bundle.js [英] Angular 2 and huge webpack bundle.js
本文介绍了角2和巨大的WebPack bundle.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图理解为什么的WebPack产生如此巨大的我的简单的2角的安装文件。
我想尝试做href=\"https://angular.io/docs/ts/latest/quickstart.html#\" rel=\"nofollow\">用的WebPack角5分钟快速入门的 5分钟快速入门包括在HTML 3供应商的脚本，以下文件（它实际上包括4个文件，但最后是我不，我的WebPack设置需要system.js）： 和这些文件没有最小化，共有约1.5MB的。 但是，当我跑我的WebPack脚本：
$ FF LS -lh node_modules / angular2 /包/ angular2-polyfills.js node_modules / systemjs /距离/ system.src.js node_modules / rxjs /包/ Rx.js node_modules / angular2 /包/ angular2.dev.js
-rw-R - R-- 1 FF 116K的工作人员12月15日21:12 node_modules / angular2 /包/ angular2-polyfills.js
-rw-R - R-- 1 FF 1.0M的工作人员12月15日21:12 node_modules / angular2 /包/ angular2.dev.js
-rw-R - R-- 1 FF人员363K 12月15日02:44 node_modules / rxjs /包/ Rx.js
module.exports = {
项：./src/boot.ts'，
输出：{
文件名：bundle.js
}，
devtool：源图，
解析：{
扩展：[''，'.TS'，'.js文件']
}，
模块：{
装载机：
{测试：/\\.ts$/，装载机：TS-装载机'}
]
}
};
有导致以下两个文件：
$ FF LS -lh捆绑*
-rw-R - R-- 1 FF人员4.0M 1月20日19:14 bundle.js
-rw-R - R-- 1 FF人员4.2M 1月20日19:14 bundle.js.map
为什么在包文件这么多giganticer比5分钟快速入门包括供应商的脚本？我该软件包的一部分，是只有几个字节...
这是当我运行的WebPack命令的输出：
$ FF的WebPack --display模块
TS-装载机：使用typescript@1.7.5和/Users/ff/testing/tsconfig.json
哈希：9d7f1ef3b0818c188e33
版本：的WebPack 1.12.11
时间：4823ms
资产大小的块块名称
bundle.js 4.19 MB 0 [发出]主
bundle.js.map 4.45 MB 0 [发出]主
[0] ./src/boot.ts 195字节{0} [建]
[1] ./~/angular2/platform/browser.js 13.1 KB {0} [建]
[2] ./~/angular2/src/core/angular_entrypoint.js 3.1 KB {0} [建]
[3] ./~/angular2/src/facade/lang.js 51 KB {0} [建]
[4] ./~/angular2/src/platform/browser_common.js 13.3 KB {0} [建]
[5] ./~/angular2/src/core/di.js 4.34 KB {0} [建]
[6] ./~/angular2/src/core/di/metadata.js 20.5 KB {0} [建]
[7] ./~/angular2/src/core/di/decorators.js 4.24 KB {0} [建]
[8] ./~/angular2/src/core/util/decorators.js 31.9 KB {0} [建]
[9] ./~/angular2/src/core/di/forward_ref.js 4.78 KB {0} [建]
[10] ./~/angular2/src/core/di/injector.js 128 KB {0} [建]
[11] ./~/angular2/src/facade/collection.js 45.7 KB {0} [建]
[12] ./~/angular2/src/core/di/provider.js 66 KB {0} [建]
[13] ./~/angular2/src/facade/exceptions.js 7.99 KB {0} [建]
[14] ./~/angular2/src/facade/exception_handler.js 18.3 KB {0} [建]
[15] ./~/angular2/src/core/reflection/reflection.js 1.57 KB {0} [建]
[16] ./~/angular2/src/core/reflection/reflector.js 22.2 KB {0} [建]
[17] ./~/angular2/src/core/reflection/reflection_capabilities.js 35.3 KB {0} [建]
[18] ./~/angular2/src/core/di/key.js 8.43 KB {0} [建]
[19] ./~/angular2/src/core/di/type_literal.js 1.38 KB {0} [建]
[20] ./~/angular2/src/core/di/exceptions.js 29.4 KB {0} [建]
[21] ./~/angular2/src/core/di/opaque_token.js 3.83 KB {0} [建]
[22] ./~/angular2/core.js 4.54 KB {0} [建]
[23] ./~/angular2/src/core/metadata.js 82.6 KB {0} [建]
[24] ./~/angular2/src/core/metadata/di.js 32.1 KB {0} [建]
[25] ./~/angular2/src/core/metadata/directives.js 84.6 KB {0} [建]
[26] ./~/angular2/src/core/change_detection.js 1.83 KB {0} [建]
[27] ./~/angular2/src/core/change_detection/change_detection.js 8.63 KB {0} [建]
[28] ./~/angular2/src/core/change_detection/differs/iterable_differs.js 10.8 KB {0} [建]
[29] ./~/angular2/src/core/change_detection/differs/default_iterable_differ.js 81.3 KB {0} [建]
[30] ./~/angular2/src/core/change_detection/differs/keyvalue_differs.js 10.5 KB {0} [建]
[31] ./~/angular2/src/core/change_detection/differs/default_keyvalue_differ.js 48 KB {0} [建]
[32] ./~/angular2/src/core/change_detection/parser/ast.js 55 KB {0} [建]
[33] ./~/angular2/src/core/change_detection/parser/lexer.js 59.3 KB {0} [建]
[34] ./~/angular2/src/core/change_detection/parser/parser.js 97.6 KB {0} [建]
[35] ./~/angular2/src/core/change_detection/parser/locals.js 5.72 KB {0} [建]
[36] ./~/angular2/src/core/change_detection/exceptions.js 8.78 KB {0} [建]
[37] ./~/angular2/src/core/change_detection/interfaces.js 5.91 KB {0} [建]
[38] ./~/angular2/src/core/change_detection/constants.js 9.2 KB {0} [建]
[39] ./~/angular2/src/core/change_detection/proto_change_detector.js 78.3 KB {0} [建]
[40] ./~/angular2/src/core/change_detection/change_detection_util.js 35.3 KB {0} [建]
[41] ./~/angular2/src/core/change_detection/pipe_lifecycle_reflector.js 800字节{0} [建]
[42] ./~/angular2/src/core/change_detection/binding_record.js 25.4 KB {0} [建]
[43] ./~/angular2/src/core/change_detection/directive_record.js 6.52 KB {0} [建]
[44] ./~/angular2/src/core/change_detection/dynamic_change_detector.js 71 KB {0} [建]
[45] ./~/angular2/src/core/change_detection/abstract_change_detector.js 49.5 KB {0} [建]
[46] ./~/angular2/src/core/change_detection/change_detector_ref.js 11.4 KB {0} [建]
[47] ./~/angular2/src/core/profile/profile.js 8.08 KB {0} [建]
[48] ./~/angular2/src/core/profile/wtf_impl.js 4.31 KB {0} [建]
[49] ./~/angular2/src/core/change_detection/observable_facade.js 611字节{0} [建]
[50] ./~/angular2/src/core/change_detection/proto_record.js 9.82 KB {0} [建]
[51] ./~/angular2/src/core/change_detection/event_binding.js 1.37 KB {0} [建]
[52] ./~/angular2/src/core/change_detection/coalesce.js 24.8 KB {0} [建]
[53] ./~/angular2/src/core/change_detection/jit_proto_change_detector.js 3.43 KB {0} [建]
[54] ./~/angular2/src/core/change_detection/change_detection_jit_generator.js 70.4 KB {0} [建]
[55] ./~/angular2/src/core/change_detection/$c$cgen_name_util.js 30.1 KB {0} [建]
[56] ./~/angular2/src/core/change_detection/$c$cgen_logic_util.js 33.8 KB {0} [建]
[57] ./~/angular2/src/core/change_detection/$c$cgen_facade.js 2.15 KB {0} [建]
[58] ./~/angular2/src/core/metadata/view.js 10.7 KB {0} [建]
[59] ./~/angular2/src/core/util.js 546字节{0} [建]
[60] ./~/angular2/src/core/prod_mode.js 479字节{0} [建]
[61] ./~/angular2/src/facade/facade.js 1.14 KB {0} [建]
[62] ./~/angular2/src/facade/async.js 21.4 KB {0} [建]
[63] ./~/angular2/src/facade/promise.js 7.21 KB {0} [建]
[64] ./~/rxjs/Subject.js 6.22 KB {0} [建]
[65] ./~/rxjs/Observable.js 5.94 KB {0} [建]
[66] ./~/rxjs/Subscriber.js 4.44 KB {0} [建]
[67] ./~/rxjs/util/noop.js 103字节{0} [建]
[68] ./~/rxjs/util/throwError.js 107字节{0} [建]
[69] ./~/rxjs/util/tryOrOnError.js 335字节{0} [建]
[70] ./~/rxjs/Subscription.js 2.96 KB {0} [建]
[71] ./~/rxjs/symbol/rxSubscriber.js 514字节{0} [建]
[72] ./~/rxjs/util/SymbolShim.js 2.09 KB {0} [建]
[73] ./~/rxjs/util/root.js 672字节{0} [建]
[74]（的WebPack）/buildin/module.js 251字节{0} [建]
[75] ./~/rxjs/subject/SubjectSubscription.js 1.46 KB {0} [建]
[76] ./~/rxjs/observable/fromPromise.js 3.16 KB {0} [建]
[77] ./~/rxjs/scheduler/queue.js 140个字节{0} [建]
[78] ./~/rxjs/scheduler/QueueScheduler.js 1.35 KB {0} [建]
[79] ./~/rxjs/scheduler/QueueAction.js 1.55 KB {0} [建]
[80] ./~/rxjs/scheduler/FutureAction.js 1.53 KB {0} [建]
[81] ./~/rxjs/operator/toPromise.js 750字节{0} [建]
[82] ./~/angular2/src/core/application_ref.js 58.6 KB {0} [建]
[83] ./~/angular2/src/core/zone/ng_zone.js 52.3 KB {0} [建]
[84] ./~/angular2/src/core/application_tokens.js 6.65 KB {0} [建]
[85] ./~/angular2/src/core/testability/testability.js 18.5 KB {0} [建]
[86] ./~/angular2/src/core/linker/dynamic_component_loader.js 23.8 KB {0} [建]
[87] ./~/angular2/src/core/linker/compiler.js 8.74 KB {0} [建]
[88] ./~/angular2/src/core/linker/proto_view_factory.js 56.4 KB {0} [建]
[89] ./~/angular2/src/core/render/api.js 34.5 KB {0} [建]
[90] ./~/angular2/src/core/pipes/pipe_provider.js 3.55 KB {0} [建]
[91] ./~/angular2/src/core/pipes/pipes.js 6.73 KB {0} [建]
[92] ./~/angular2/src/core/change_detection/pipes.js 1.03 KB {0} [建]
[93] ./~/angular2/src/core/linker/view.js 51.2 KB {0} [建]
[94] ./~/angular2/src/core/linker/view_ref.js 15.9 KB {0} [建]
[95] ./~/angular2/src/core/render/util.js 2.38 KB {0} [建]
[96] ./~/angular2/src/core/linker/element_binder.js 2.76 KB {0} [建]
[97] ./~/angular2/src/core/linker/element_injector.js 170 KB {0} [建]
[98] ./~/angular2/src/core/linker/view_manager.js 62 KB {0} [建]
[99] ./~/angular2/src/core/linker/view_manager_utils.js 48.1 KB {0} [建]
[100] ./~/angular2/src/core/linker/element_ref.js 8.44 KB {0} [建]
[101] ./~/angular2/src/core/linker/template_ref.js 6.97 KB {0} [建]
[102] ./~/angular2/src/core/linker/view_pool.js 6.69 KB {0} [建]
[103] ./~/angular2/src/core/linker/view_listener.js 2.44 KB {0} [建]
[104] ./~/angular2/src/core/linker/view_container_ref.js 18.9 KB {0} [建]
[105] ./~/angular2/src/core/linker/directive_lifecycle_reflector.js 4.21 KB {0} [建]
[106] ./~/angular2/src/core/linker/interfaces.js 21.4 KB {0} [建]
[107] ./~/angular2/src/core/linker/query_list.js 8.98 KB {0} [建]
[108] ./~/angular2/src/core/linker/event_config.js 3.95 KB {0} [建]
[109] ./~/angular2/src/core/linker/directive_resolver.js 19.4 KB {0} [建]
[110] ./~/angular2/src/core/linker/view_resolver.js 15.2 KB {0} [建]
[111] ./~/angular2/src/core/linker/pipe_resolver.js 5.06 KB {0} [建]
[112] ./~/angular2/src/core/platform_directives_and_pipes.js 4.26 KB {0} [建]
[113] ./~/angular2/src/core/linker/template_commands.js 23.7 KB {0} [建]
[114] ./~/angular2/src/core/console.js 2.08 KB {0} [建]
[115] ./~/angular2/src/core/zone.js 621字节{0} [建]
[116] ./~/angular2/src/core/render.js 1.86 KB {0} [建]
[117] ./~/angular2/src/core/linker.js 3.33 KB {0} [建]
[118] ./~/angular2/src/core/debug/debug_element.js 30.4 KB {0} [建]
[119] ./~/angular2/src/core/platform_common_providers.js 2.37 KB {0} [建]
[120] ./~/angular2/src/core/application_common_providers.js 6.53 KB {0} [建]
[121] ./~/angular2/common.js 892字节{0} [建]
[122] ./~/angular2/src/common/pipes.js 4.95 KB {0} [建]
[123] ./~/angular2/src/common/pipes/async_pipe.js 16.6 KB {0} [建]
[124] ./~/angular2/src/common/pipes/invalid_pipe_argument_exception.js 2.05 KB {0} [建]
[125] ./~/angular2/src/common/pipes/uppercase_pipe.js 4.11 KB {0} [建]
[126] ./~/angular2/src/common/pipes/lowercase_pipe.js 4.08 KB {0} [建]
[127] ./~/angular2/src/common/pipes/json_pipe.js 3.16 KB {0} [建]
[128] ./~/angular2/src/common/pipes/slice_pipe.js 10.2 KB {0} [建]
[129] ./~/angular2/src/common/pipes/date_pipe.js 16.2 KB {0} [建]
[130] ./~/angular2/src/facade/intl.js 15.1 KB {0} [建]
[131] ./~/angular2/src/common/pipes/number_pipe.js 20.6 KB {0} [建]
[132] ./~/angular2/src/common/directives.js 2.17 KB {0} [建]
[133] ./~/angular2/src/common/directives/ng_class.js 23.5 KB {0} [建]
[134] ./~/angular2/src/common/directives/ng_for.js 23.1 KB {0} [建]
[135] ./~/angular2/src/common/directives/ng_if.js 6.34 KB {0} [建]
[136] ./~/angular2/src/common/directives/ng_style.js 11.3 KB {0} [建]
[137] ./~/angular2/src/common/directives/ng_switch.js 25.9 KB {0} [建]
[138] ./~/angular2/src/common/directives/observable_list_diff.js 820字节{0} [建]
[139] ./~/angular2/src/common/directives/core_directives.js 4.5 KB {0} [建]
[140] ./~/angular2/src/common/forms.js 7.51 KB {0} [建]
[141] ./~/angular2/src/common/forms/model.js 62.7 KB {0} [建]
[142] ./~/angular2/src/common/forms/directives/abstract_control_directive.js 6.67 KB {0} [建]
[143] ./~/angular2/src/common/forms/directives/control_container.js 2.87 KB {0} [建]
[144] ./~/angular2/src/common/forms/directives/ng_control_name.js 17.2 KB {0} [建]
[145] ./~/angular2/src/common/forms/directives/ng_control.js 3.17 KB {0} [建]
[146] ./~/angular2/src/common/forms/directives/control_value_accessor.js 2.16 KB {0} [建]
[147] ./~/angular2/src/common/forms/directives/shared.js 16.5 KB {0} [建]
[148] ./~/angular2/src/common/forms/validators.js 14.8 KB {0} [建]
[149] ./~/angular2/src/common/forms/directives/default_value_accessor.js 7.41 KB {0} [建]
[150] ./~/angular2/src/common/forms/directives/number_value_accessor.js 6.83 KB {0} [建]
[151] ./~/angular2/src/common/forms/directives/checkbox_value_accessor.js 6.34 KB {0} [建]
[152] ./~/angular2/src/common/forms/directives/select_control_value_accessor.js 9.37 KB {0} [建]
[153] ./~/angular2/src/common/forms/directives/normalize_validator.js 1.38 KB {0} [建]
[154] ./~/angular2/src/common/forms/directives/ng_form_control.js 15.4 KB {0} [建]
[155] ./~/angular2/src/common/forms/directives/ng_model.js 12.9 KB {0} [建]
[156] ./~/angular2/src/common/forms/directives/ng_control_group.js 13.7 KB {0} [建]
[157] ./~/angular2/src/common/forms/directives/ng_form_model.js 20.7 KB {0} [建]
[158] ./~/angular2/src/common/forms/directives/ng_form.js 22.1 KB {0} [建]
[159] ./~/angular2/src/common/forms/directives/ng_control_status.js 8.41 KB {0} [建]
[160] ./~/angular2/src/common/forms/directives.js 9.03 KB {0} [建]
[161] ./~/angular2/src/common/forms/directives/validators.js 12 KB {0} [建]
[162] ./~/angular2/src/common/forms/form_builder.js 16 KB {0} [建]
[163] ./~/angular2/src/common/common_directives.js 4.11 KB {0} [建]
[164] ./~/angular2/src/platform/dom/dom_adapter.js 8.88 KB {0} [建]
[165] ./~/angular2/src/platform/dom/events/dom_events.js 6.43 KB {0} [建]
[166] ./~/angular2/src/platform/dom/events/event_manager.js 9.5 KB {0} [建]
[167] ./~/angular2/src/platform/dom/events/key_events.js 16.5 KB {0} [建]
[168] ./~/angular2/src/platform/dom/events/hammer_gestures.js 6.3 KB {0} [建]
[169] ./~/angular2/src/platform/dom/events/hammer_common.js 4.95 KB {0} [建]
[170] ./~/angular2/src/platform/dom/dom_tokens.js 1.57 KB {0} [建]
[171] ./~/angular2/src/platform/dom/dom_renderer.js 58.5 KB {0} [建]
[172] ./~/angular2/src/animate/animation_builder.js 3.19 KB {0} [建]
[173] ./~/angular2/src/animate/css_animation_builder.js 9.02 KB {0} [建]
[174] ./~/angular2/src/animate/css_animation_options.js 1.97 KB {0} [建]
[175] ./~/angular2/src/animate/animation.js 26.9 KB {0} [建]
[176] ./~/angular2/src/facade/math.js 645字节{0} [建]
[177] ./~/angular2/src/platform/dom/util.js 2.38 KB {0} [建]
[178] ./~/angular2/src/animate/browser_details.js 8.91 KB {0} [建]
[179] ./~/angular2/src/platform/dom/shared_styles_host.js 9.57 KB {0} [建]
[180] ./~/angular2/src/core/render/view_factory.js 49.8 KB {0} [建]
[181] ./~/angular2/src/core/render/view.js 10.6 KB {0} [建]
[182] ./~/angular2/src/platform/browser/browser_adapter.js 67.9 KB {0} [建]
[183] ./~/angular2/src/platform/browser/generic_browser_adapter.js 11.1 KB {0} [建]
[184] ./~/angular2/src/platform/browser/xhr_impl.js 6.03 KB {0} [建]
[185] ./~/angular2/src/compiler/xhr.js 1.21 KB {0} [建]
[186] ./~/angular2/src/platform/browser/testability.js 9.68 KB {0} [建]
[187] ./~/angular2/src/core/profile/wtf_init.js 598字节{0} [建]
[188] ./~/angular2/src/platform/browser/title.js 2.76 KB {0} [建]
[189] ./~/angular2/platform/common_dom.js 3.19 KB {0} [建]
[190] ./~/angular2/src/platform/dom/debug/by.js 4.24 KB {0} [建]
[191] ./~/angular2/src/platform/dom/debug/debug_element_view_listener.js 12.6 KB {0} [建]
[192] ./~/angular2/src/platform/browser/tools/tools.js 2.58 KB {0} [建]
[193] ./~/angular2/src/platform/browser/tools/common_tools.js 9.32 KB {0} [建]
[194] ./~/angular2/src/facade/browser.js 2.67 KB {0} [建]
[195] ./~/angular2/compiler.js 982字节{0} [建]
[196] ./~/angular2/src/compiler/url_resolver.js 36.7 KB {0} [建]
[197] ./~/angular2/src/compiler/compiler.js 9.75 KB {0} [建]
[198] ./~/angular2/src/compiler/runtime_compiler.js 5.7 KB {0} [建]
[199] ./~/angular2/src/compiler/template_compiler.js 48.4 KB {0} [建]
[200] ./~/angular2/src/compiler/directive_metadata.js 36.5 KB {0} [建]
[201] ./~/angular2/src/compiler/selector.js 55.9 KB {0} [建]
[202] ./~/angular2/src/compiler/util.js 11.3 KB {0} [建]
[203] ./~/angular2/src/compiler/source_module.js 7.48 KB {0} [建]
[204] ./~/angular2/src/compiler/change_detector_compiler.js 15.5 KB {0} [建]
[205] ./~/angular2/src/compiler/change_definition_factory.js 33.5 KB {0} [建]
[206] ./~/angular2/src/compiler/template_ast.js 28.4 KB {0} [建]
[207] ./~/angular2/src/transform/template_compiler/change_detector_$c$cgen.js 2.24 KB {0} [建]
[208] ./~/angular2/src/compiler/style_compiler.js 18.5 KB {0} [建]
[209] ./~/angular2/src/compiler/shadow_css.js 64 KB {0} [建]
[210] ./~/angular2/src/compiler/style_url_resolver.js 6.42 KB {0} [建]
[211] ./~/angular2/src/compiler/command_compiler.js 63.2 KB {0} [建]
[212] ./~/angular2/src/compiler/template_parser.js 121 KB {0} [建]
[213] ./~/angular2/src/compiler/html_parser.js 39 KB {0} [建]
[214] ./~/angular2/src/compiler/html_ast.js 6.08 KB {0} [建]
[215] ./~/angular2/src/compiler/html_lexer.js 77.5 KB {0} [建]
[216] ./~/angular2/src/compiler/parse_util.js 8.45 KB {0} [建]
[217] ./~/angular2/src/compiler/html_tags.js 45.3 KB {0} [建]
[218] ./~/angular2/src/compiler/schema/element_schema_registry.js 1.45 KB {0} [建]
[219] ./~/angular2/src/compiler/template_$p$pparser.js 9.77 KB {0} [建]
[220] ./~/angular2/src/compiler/template_normalizer.js 20.6 KB {0} [建]
[221] ./~/angular2/src/compiler/runtime_metadata.js 19.5 KB {0} [建]
[222] ./~/angular2/src/compiler/schema/dom_element_schema_registry.js 8.43 KB {0} [建]
[223] ./src/testing/components/testing.ts 1.27 KB {0} [建]
解决方案
虽然有点笨拙，WebPACK中文档的网站有它是什么好解释的。 （ https://webpack.github.io/docs/usage-with-bower。 HTML ）
假设你使用的凉亭安装angular2，上面的链接比较大小的WebPack达到使用通过 NPM <安装通过亭子安装的程序包与包/ code>。
有关类似角2，这是仍处于测试阶段，而且可能带有大量的中间件，我想你最好不包括在你的最后包。如果你这样做，你最终将包大小的气球，导致一个非常缓慢的，并可能阻塞请求。
I am trying to understand why webpack produces such huge files of my simple Angular 2 setup.
I wanted to try to make the Angular 5 min quickstart with webpack.
The 5 min quickstart includes in the html 3 vendor scripts, the following files (it actually includes 4 files, but the last is for system.js which I do not need in my webpack setup):
ff$ ls -lh node_modules/angular2/bundles/angular2-polyfills.js node_modules/systemjs/dist/system.src.js node_modules/rxjs/bundles/Rx.js node_modules/angular2/bundles/angular2.dev.js
-rw-r--r-- 1 ff staff 116K Dec 15 21:12 node_modules/angular2/bundles/angular2-polyfills.js
-rw-r--r-- 1 ff staff 1.0M Dec 15 21:12 node_modules/angular2/bundles/angular2.dev.js
-rw-r--r-- 1 ff staff 363K Dec 15 02:44 node_modules/rxjs/bundles/Rx.js
And these files are not minimized, a total of around 1.5MB.
But when I run my webpack script:
module.exports = {
entry: './src/boot.ts',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
}
};
It results in the following two files:
ff$ ls -lh bundle*
-rw-r--r-- 1 ff staff 4.0M Jan 20 19:14 bundle.js
-rw-r--r-- 1 ff staff 4.2M Jan 20 19:14 bundle.js.map
Why are the bundle files so much giganticer than the vendor scripts that the 5 min quickstart includes? My part of this bundle is only a few bytes...
This is the output when I run the webpack command:
ff$ webpack --display-modules
ts-loader: Using typescript@1.7.5 and /Users/ff/testing/tsconfig.json
Hash: 9d7f1ef3b0818c188e33
Version: webpack 1.12.11
Time: 4823ms
Asset Size Chunks Chunk Names
bundle.js 4.19 MB 0 [emitted] main
bundle.js.map 4.45 MB 0 [emitted] main
[0] ./src/boot.ts 195 bytes {0} [built]
[1] ./~/angular2/platform/browser.js 13.1 kB {0} [built]
[2] ./~/angular2/src/core/angular_entrypoint.js 3.1 kB {0} [built]
[3] ./~/angular2/src/facade/lang.js 51 kB {0} [built]
[4] ./~/angular2/src/platform/browser_common.js 13.3 kB {0} [built]
[5] ./~/angular2/src/core/di.js 4.34 kB {0} [built]
[6] ./~/angular2/src/core/di/metadata.js 20.5 kB {0} [built]
[7] ./~/angular2/src/core/di/decorators.js 4.24 kB {0} [built]
[8] ./~/angular2/src/core/util/decorators.js 31.9 kB {0} [built]
[9] ./~/angular2/src/core/di/forward_ref.js 4.78 kB {0} [built]
[10] ./~/angular2/src/core/di/injector.js 128 kB {0} [built]
[11] ./~/angular2/src/facade/collection.js 45.7 kB {0} [built]
[12] ./~/angular2/src/core/di/provider.js 66 kB {0} [built]
[13] ./~/angular2/src/facade/exceptions.js 7.99 kB {0} [built]
[14] ./~/angular2/src/facade/exception_handler.js 18.3 kB {0} [built]
[15] ./~/angular2/src/core/reflection/reflection.js 1.57 kB {0} [built]
[16] ./~/angular2/src/core/reflection/reflector.js 22.2 kB {0} [built]
[17] ./~/angular2/src/core/reflection/reflection_capabilities.js 35.3 kB {0} [built]
[18] ./~/angular2/src/core/di/key.js 8.43 kB {0} [built]
[19] ./~/angular2/src/core/di/type_literal.js 1.38 kB {0} [built]
[20] ./~/angular2/src/core/di/exceptions.js 29.4 kB {0} [built]
[21] ./~/angular2/src/core/di/opaque_token.js 3.83 kB {0} [built]
[22] ./~/angular2/core.js 4.54 kB {0} [built]
[23] ./~/angular2/src/core/metadata.js 82.6 kB {0} [built]
[24] ./~/angular2/src/core/metadata/di.js 32.1 kB {0} [built]
[25] ./~/angular2/src/core/metadata/directives.js 84.6 kB {0} [built]
[26] ./~/angular2/src/core/change_detection.js 1.83 kB {0} [built]
[27] ./~/angular2/src/core/change_detection/change_detection.js 8.63 kB {0} [built]
[28] ./~/angular2/src/core/change_detection/differs/iterable_differs.js 10.8 kB {0} [built]
[29] ./~/angular2/src/core/change_detection/differs/default_iterable_differ.js 81.3 kB {0} [built]
[30] ./~/angular2/src/core/change_detection/differs/keyvalue_differs.js 10.5 kB {0} [built]
[31] ./~/angular2/src/core/change_detection/differs/default_keyvalue_differ.js 48 kB {0} [built]
[32] ./~/angular2/src/core/change_detection/parser/ast.js 55 kB {0} [built]
[33] ./~/angular2/src/core/change_detection/parser/lexer.js 59.3 kB {0} [built]
[34] ./~/angular2/src/core/change_detection/parser/parser.js 97.6 kB {0} [built]
[35] ./~/angular2/src/core/change_detection/parser/locals.js 5.72 kB {0} [built]
[36] ./~/angular2/src/core/change_detection/exceptions.js 8.78 kB {0} [built]
[37] ./~/angular2/src/core/change_detection/interfaces.js 5.91 kB {0} [built]
[38] ./~/angular2/src/core/change_detection/constants.js 9.2 kB {0} [built]
[39] ./~/angular2/src/core/change_detection/proto_change_detector.js 78.3 kB {0} [built]
[40] ./~/angular2/src/core/change_detection/change_detection_util.js 35.3 kB {0} [built]
[41] ./~/angular2/src/core/change_detection/pipe_lifecycle_reflector.js 800 bytes {0} [built]
[42] ./~/angular2/src/core/change_detection/binding_record.js 25.4 kB {0} [built]
[43] ./~/angular2/src/core/change_detection/directive_record.js 6.52 kB {0} [built]
[44] ./~/angular2/src/core/change_detection/dynamic_change_detector.js 71 kB {0} [built]
[45] ./~/angular2/src/core/change_detection/abstract_change_detector.js 49.5 kB {0} [built]
[46] ./~/angular2/src/core/change_detection/change_detector_ref.js 11.4 kB {0} [built]
[47] ./~/angular2/src/core/profile/profile.js 8.08 kB {0} [built]
[48] ./~/angular2/src/core/profile/wtf_impl.js 4.31 kB {0} [built]
[49] ./~/angular2/src/core/change_detection/observable_facade.js 611 bytes {0} [built]
[50] ./~/angular2/src/core/change_detection/proto_record.js 9.82 kB {0} [built]
[51] ./~/angular2/src/core/change_detection/event_binding.js 1.37 kB {0} [built]
[52] ./~/angular2/src/core/change_detection/coalesce.js 24.8 kB {0} [built]
[53] ./~/angular2/src/core/change_detection/jit_proto_change_detector.js 3.43 kB {0} [built]
[54] ./~/angular2/src/core/change_detection/change_detection_jit_generator.js 70.4 kB {0} [built]
[55] ./~/angular2/src/core/change_detection/codegen_name_util.js 30.1 kB {0} [built]
[56] ./~/angular2/src/core/change_detection/codegen_logic_util.js 33.8 kB {0} [built]
[57] ./~/angular2/src/core/change_detection/codegen_facade.js 2.15 kB {0} [built]
[58] ./~/angular2/src/core/metadata/view.js 10.7 kB {0} [built]
[59] ./~/angular2/src/core/util.js 546 bytes {0} [built]
[60] ./~/angular2/src/core/prod_mode.js 479 bytes {0} [built]
[61] ./~/angular2/src/facade/facade.js 1.14 kB {0} [built]
[62] ./~/angular2/src/facade/async.js 21.4 kB {0} [built]
[63] ./~/angular2/src/facade/promise.js 7.21 kB {0} [built]
[64] ./~/rxjs/Subject.js 6.22 kB {0} [built]
[65] ./~/rxjs/Observable.js 5.94 kB {0} [built]
[66] ./~/rxjs/Subscriber.js 4.44 kB {0} [built]
[67] ./~/rxjs/util/noop.js 103 bytes {0} [built]
[68] ./~/rxjs/util/throwError.js 107 bytes {0} [built]
[69] ./~/rxjs/util/tryOrOnError.js 335 bytes {0} [built]
[70] ./~/rxjs/Subscription.js 2.96 kB {0} [built]
[71] ./~/rxjs/symbol/rxSubscriber.js 514 bytes {0} [built]
[72] ./~/rxjs/util/SymbolShim.js 2.09 kB {0} [built]
[73] ./~/rxjs/util/root.js 672 bytes {0} [built]
[74] (webpack)/buildin/module.js 251 bytes {0} [built]
[75] ./~/rxjs/subject/SubjectSubscription.js 1.46 kB {0} [built]
[76] ./~/rxjs/observable/fromPromise.js 3.16 kB {0} [built]
[77] ./~/rxjs/scheduler/queue.js 140 bytes {0} [built]
[78] ./~/rxjs/scheduler/QueueScheduler.js 1.35 kB {0} [built]
[79] ./~/rxjs/scheduler/QueueAction.js 1.55 kB {0} [built]
[80] ./~/rxjs/scheduler/FutureAction.js 1.53 kB {0} [built]
[81] ./~/rxjs/operator/toPromise.js 750 bytes {0} [built]
[82] ./~/angular2/src/core/application_ref.js 58.6 kB {0} [built]
[83] ./~/angular2/src/core/zone/ng_zone.js 52.3 kB {0} [built]
[84] ./~/angular2/src/core/application_tokens.js 6.65 kB {0} [built]
[85] ./~/angular2/src/core/testability/testability.js 18.5 kB {0} [built]
[86] ./~/angular2/src/core/linker/dynamic_component_loader.js 23.8 kB {0} [built]
[87] ./~/angular2/src/core/linker/compiler.js 8.74 kB {0} [built]
[88] ./~/angular2/src/core/linker/proto_view_factory.js 56.4 kB {0} [built]
[89] ./~/angular2/src/core/render/api.js 34.5 kB {0} [built]
[90] ./~/angular2/src/core/pipes/pipe_provider.js 3.55 kB {0} [built]
[91] ./~/angular2/src/core/pipes/pipes.js 6.73 kB {0} [built]
[92] ./~/angular2/src/core/change_detection/pipes.js 1.03 kB {0} [built]
[93] ./~/angular2/src/core/linker/view.js 51.2 kB {0} [built]
[94] ./~/angular2/src/core/linker/view_ref.js 15.9 kB {0} [built]
[95] ./~/angular2/src/core/render/util.js 2.38 kB {0} [built]
[96] ./~/angular2/src/core/linker/element_binder.js 2.76 kB {0} [built]
[97] ./~/angular2/src/core/linker/element_injector.js 170 kB {0} [built]
[98] ./~/angular2/src/core/linker/view_manager.js 62 kB {0} [built]
[99] ./~/angular2/src/core/linker/view_manager_utils.js 48.1 kB {0} [built]
[100] ./~/angular2/src/core/linker/element_ref.js 8.44 kB {0} [built]
[101] ./~/angular2/src/core/linker/template_ref.js 6.97 kB {0} [built]
[102] ./~/angular2/src/core/linker/view_pool.js 6.69 kB {0} [built]
[103] ./~/angular2/src/core/linker/view_listener.js 2.44 kB {0} [built]
[104] ./~/angular2/src/core/linker/view_container_ref.js 18.9 kB {0} [built]
[105] ./~/angular2/src/core/linker/directive_lifecycle_reflector.js 4.21 kB {0} [built]
[106] ./~/angular2/src/core/linker/interfaces.js 21.4 kB {0} [built]
[107] ./~/angular2/src/core/linker/query_list.js 8.98 kB {0} [built]
[108] ./~/angular2/src/core/linker/event_config.js 3.95 kB {0} [built]
[109] ./~/angular2/src/core/linker/directive_resolver.js 19.4 kB {0} [built]
[110] ./~/angular2/src/core/linker/view_resolver.js 15.2 kB {0} [built]
[111] ./~/angular2/src/core/linker/pipe_resolver.js 5.06 kB {0} [built]
[112] ./~/angular2/src/core/platform_directives_and_pipes.js 4.26 kB {0} [built]
[113] ./~/angular2/src/core/linker/template_commands.js 23.7 kB {0} [built]
[114] ./~/angular2/src/core/console.js 2.08 kB {0} [built]
[115] ./~/angular2/src/core/zone.js 621 bytes {0} [built]
[116] ./~/angular2/src/core/render.js 1.86 kB {0} [built]
[117] ./~/angular2/src/core/linker.js 3.33 kB {0} [built]
[118] ./~/angular2/src/core/debug/debug_element.js 30.4 kB {0} [built]
[119] ./~/angular2/src/core/platform_common_providers.js 2.37 kB {0} [built]
[120] ./~/angular2/src/core/application_common_providers.js 6.53 kB {0} [built]
[121] ./~/angular2/common.js 892 bytes {0} [built]
[122] ./~/angular2/src/common/pipes.js 4.95 kB {0} [built]
[123] ./~/angular2/src/common/pipes/async_pipe.js 16.6 kB {0} [built]
[124] ./~/angular2/src/common/pipes/invalid_pipe_argument_exception.js 2.05 kB {0} [built]
[125] ./~/angular2/src/common/pipes/uppercase_pipe.js 4.11 kB {0} [built]
[126] ./~/angular2/src/common/pipes/lowercase_pipe.js 4.08 kB {0} [built]
[127] ./~/angular2/src/common/pipes/json_pipe.js 3.16 kB {0} [built]
[128] ./~/angular2/src/common/pipes/slice_pipe.js 10.2 kB {0} [built]
[129] ./~/angular2/src/common/pipes/date_pipe.js 16.2 kB {0} [built]
[130] ./~/angular2/src/facade/intl.js 15.1 kB {0} [built]
[131] ./~/angular2/src/common/pipes/number_pipe.js 20.6 kB {0} [built]
[132] ./~/angular2/src/common/directives.js 2.17 kB {0} [built]
[133] ./~/angular2/src/common/directives/ng_class.js 23.5 kB {0} [built]
[134] ./~/angular2/src/common/directives/ng_for.js 23.1 kB {0} [built]
[135] ./~/angular2/src/common/directives/ng_if.js 6.34 kB {0} [built]
[136] ./~/angular2/src/common/directives/ng_style.js 11.3 kB {0} [built]
[137] ./~/angular2/src/common/directives/ng_switch.js 25.9 kB {0} [built]
[138] ./~/angular2/src/common/directives/observable_list_diff.js 820 bytes {0} [built]
[139] ./~/angular2/src/common/directives/core_directives.js 4.5 kB {0} [built]
[140] ./~/angular2/src/common/forms.js 7.51 kB {0} [built]
[141] ./~/angular2/src/common/forms/model.js 62.7 kB {0} [built]
[142] ./~/angular2/src/common/forms/directives/abstract_control_directive.js 6.67 kB {0} [built]
[143] ./~/angular2/src/common/forms/directives/control_container.js 2.87 kB {0} [built]
[144] ./~/angular2/src/common/forms/directives/ng_control_name.js 17.2 kB {0} [built]
[145] ./~/angular2/src/common/forms/directives/ng_control.js 3.17 kB {0} [built]
[146] ./~/angular2/src/common/forms/directives/control_value_accessor.js 2.16 kB {0} [built]
[147] ./~/angular2/src/common/forms/directives/shared.js 16.5 kB {0} [built]
[148] ./~/angular2/src/common/forms/validators.js 14.8 kB {0} [built]
[149] ./~/angular2/src/common/forms/directives/default_value_accessor.js 7.41 kB {0} [built]
[150] ./~/angular2/src/common/forms/directives/number_value_accessor.js 6.83 kB {0} [built]
[151] ./~/angular2/src/common/forms/directives/checkbox_value_accessor.js 6.34 kB {0} [built]
[152] ./~/angular2/src/common/forms/directives/select_control_value_accessor.js 9.37 kB {0} [built]
[153] ./~/angular2/src/common/forms/directives/normalize_validator.js 1.38 kB {0} [built]
[154] ./~/angular2/src/common/forms/directives/ng_form_control.js 15.4 kB {0} [built]
[155] ./~/angular2/src/common/forms/directives/ng_model.js 12.9 kB {0} [built]
[156] ./~/angular2/src/common/forms/directives/ng_control_group.js 13.7 kB {0} [built]
[157] ./~/angular2/src/common/forms/directives/ng_form_model.js 20.7 kB {0} [built]
[158] ./~/angular2/src/common/forms/directives/ng_form.js 22.1 kB {0} [built]
[159] ./~/angular2/src/common/forms/directives/ng_control_status.js 8.41 kB {0} [built]
[160] ./~/angular2/src/common/forms/directives.js 9.03 kB {0} [built]
[161] ./~/angular2/src/common/forms/directives/validators.js 12 kB {0} [built]
[162] ./~/angular2/src/common/forms/form_builder.js 16 kB {0} [built]
[163] ./~/angular2/src/common/common_directives.js 4.11 kB {0} [built]
[164] ./~/angular2/src/platform/dom/dom_adapter.js 8.88 kB {0} [built]
[165] ./~/angular2/src/platform/dom/events/dom_events.js 6.43 kB {0} [built]
[166] ./~/angular2/src/platform/dom/events/event_manager.js 9.5 kB {0} [built]
[167] ./~/angular2/src/platform/dom/events/key_events.js 16.5 kB {0} [built]
[168] ./~/angular2/src/platform/dom/events/hammer_gestures.js 6.3 kB {0} [built]
[169] ./~/angular2/src/platform/dom/events/hammer_common.js 4.95 kB {0} [built]
[170] ./~/angular2/src/platform/dom/dom_tokens.js 1.57 kB {0} [built]
[171] ./~/angular2/src/platform/dom/dom_renderer.js 58.5 kB {0} [built]
[172] ./~/angular2/src/animate/animation_builder.js 3.19 kB {0} [built]
[173] ./~/angular2/src/animate/css_animation_builder.js 9.02 kB {0} [built]
[174] ./~/angular2/src/animate/css_animation_options.js 1.97 kB {0} [built]
[175] ./~/angular2/src/animate/animation.js 26.9 kB {0} [built]
[176] ./~/angular2/src/facade/math.js 645 bytes {0} [built]
[177] ./~/angular2/src/platform/dom/util.js 2.38 kB {0} [built]
[178] ./~/angular2/src/animate/browser_details.js 8.91 kB {0} [built]
[179] ./~/angular2/src/platform/dom/shared_styles_host.js 9.57 kB {0} [built]
[180] ./~/angular2/src/core/render/view_factory.js 49.8 kB {0} [built]
[181] ./~/angular2/src/core/render/view.js 10.6 kB {0} [built]
[182] ./~/angular2/src/platform/browser/browser_adapter.js 67.9 kB {0} [built]
[183] ./~/angular2/src/platform/browser/generic_browser_adapter.js 11.1 kB {0} [built]
[184] ./~/angular2/src/platform/browser/xhr_impl.js 6.03 kB {0} [built]
[185] ./~/angular2/src/compiler/xhr.js 1.21 kB {0} [built]
[186] ./~/angular2/src/platform/browser/testability.js 9.68 kB {0} [built]
[187] ./~/angular2/src/core/profile/wtf_init.js 598 bytes {0} [built]
[188] ./~/angular2/src/platform/browser/title.js 2.76 kB {0} [built]
[189] ./~/angular2/platform/common_dom.js 3.19 kB {0} [built]
[190] ./~/angular2/src/platform/dom/debug/by.js 4.24 kB {0} [built]
[191] ./~/angular2/src/platform/dom/debug/debug_element_view_listener.js 12.6 kB {0} [built]
[192] ./~/angular2/src/platform/browser/tools/tools.js 2.58 kB {0} [built]
[193] ./~/angular2/src/platform/browser/tools/common_tools.js 9.32 kB {0} [built]
[194] ./~/angular2/src/facade/browser.js 2.67 kB {0} [built]
[195] ./~/angular2/compiler.js 982 bytes {0} [built]
[196] ./~/angular2/src/compiler/url_resolver.js 36.7 kB {0} [built]
[197] ./~/angular2/src/compiler/compiler.js 9.75 kB {0} [built]
[198] ./~/angular2/src/compiler/runtime_compiler.js 5.7 kB {0} [built]
[199] ./~/angular2/src/compiler/template_compiler.js 48.4 kB {0} [built]
[200] ./~/angular2/src/compiler/directive_metadata.js 36.5 kB {0} [built]
[201] ./~/angular2/src/compiler/selector.js 55.9 kB {0} [built]
[202] ./~/angular2/src/compiler/util.js 11.3 kB {0} [built]
[203] ./~/angular2/src/compiler/source_module.js 7.48 kB {0} [built]
[204] ./~/angular2/src/compiler/change_detector_compiler.js 15.5 kB {0} [built]
[205] ./~/angular2/src/compiler/change_definition_factory.js 33.5 kB {0} [built]
[206] ./~/angular2/src/compiler/template_ast.js 28.4 kB {0} [built]
[207] ./~/angular2/src/transform/template_compiler/change_detector_codegen.js 2.24 kB {0} [built]
[208] ./~/angular2/src/compiler/style_compiler.js 18.5 kB {0} [built]
[209] ./~/angular2/src/compiler/shadow_css.js 64 kB {0} [built]
[210] ./~/angular2/src/compiler/style_url_resolver.js 6.42 kB {0} [built]
[211] ./~/angular2/src/compiler/command_compiler.js 63.2 kB {0} [built]
[212] ./~/angular2/src/compiler/template_parser.js 121 kB {0} [built]
[213] ./~/angular2/src/compiler/html_parser.js 39 kB {0} [built]
[214] ./~/angular2/src/compiler/html_ast.js 6.08 kB {0} [built]
[215] ./~/angular2/src/compiler/html_lexer.js 77.5 kB {0} [built]
[216] ./~/angular2/src/compiler/parse_util.js 8.45 kB {0} [built]
[217] ./~/angular2/src/compiler/html_tags.js 45.3 kB {0} [built]
[218] ./~/angular2/src/compiler/schema/element_schema_registry.js 1.45 kB {0} [built]
[219] ./~/angular2/src/compiler/template_preparser.js 9.77 kB {0} [built]
[220] ./~/angular2/src/compiler/template_normalizer.js 20.6 kB {0} [built]
[221] ./~/angular2/src/compiler/runtime_metadata.js 19.5 kB {0} [built]
[222] ./~/angular2/src/compiler/schema/dom_element_schema_registry.js 8.43 kB {0} [built]
[223] ./src/testing/components/testing.ts 1.27 kB {0} [built]
解决方案
Although a little unwieldy, Webpack Documentation site has good explanation of what it is. (https://webpack.github.io/docs/usage-with-bower.html)
Assuming that you installed angular2 using bower, the link above compares the sizes Webpack achieves using packages installed via bower vs. packages installed via npm.
For something like Angular 2, which is still in beta, and probably comes with a lot of middleware, I think you are better off not including it in your final bundle. If you do, your final bundle will balloon in size, leading to a very slow and possibly blocking request.
这篇关于角2和巨大的WebPack bundle.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
