WebPack: Loading and executing time for bundled JavaScript files?

Question

SQL

I actively study JS , Angular 2 using Webpack.
As John Resing writes in JavaScript Ninja Secrets 2015
, web page load time = transfer time + compute time ,
also on page 248 provides an analysis of page load speed.
Namely, a page is loaded with the jQuery library presented in 3 different forms of library packaging:
1) Normal (No compression) - average load time 645.4818 ms for 12589 samples<
2) Minimized using the YUI Compressor - 519.7214 ms 12611
3) Packed with eval() - 591.6636 ms per12606 .
After looking at the built application file, I noticed that webpack packs js modules using eval ().
An excerpt from the collected file

/***/ 338:
/***/ function(module, exports, __webpack_require__) {

  eval("/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\"use strict\";\nfunction __export(m) {\n    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\n}\n__export(__webpack_require__(339));\n//# sourceMappingURL=index.js.map//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMzM4LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vfi9AYW5ndWxhci9mb3Jtcy9pbmRleC5qcz8yMGExIl0sInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblwidXNlIHN0cmljdFwiO1xuZnVuY3Rpb24gX19leHBvcnQobSkge1xuICAgIGZvciAodmFyIHAgaW4gbSkgaWYgKCFleHBvcnRzLmhhc093blByb3BlcnR5KHApKSBleHBvcnRzW3BdID0gbVtwXTtcbn1cbl9fZXhwb3J0KHJlcXVpcmUoJy4vc3JjL2Zvcm1zJykpO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9aW5kZXguanMubWFwXG5cblxuLyoqKioqKioqKioqKioqKioqXG4gKiogV0VCUEFDSyBGT09URVJcbiAqKiAuL34vQGFuZ3VsYXIvZm9ybXMvaW5kZXguanNcbiAqKiBtb2R1bGUgaWQgPSAzMzhcbiAqKiBtb2R1bGUgY2h1bmtzID0gMFxuICoqLyJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0=");

/***/ },

What justifies the choice of such a packaging method, if it is not the fastest in terms of loading time?
I repeat that I still do not know many subtleties.

Answer 1

tell me, do you have it somewhere in the requirements or did you decide to take into account the components that make up the system unit?
components in a word can also be added as products to the catalog. And it's easy to make many-to-many connections between components and the system unit.

Answer 2

Change the name of the terms and the stasis will fall into place.
accessories + assembly (a set of accessories).
The system unit is a set of components fastened together.
And there will be tables: components (kid), set (sid), components of the set.

Answer 3

You have debug: true enabled in config and devtool: 'eval'
https://webpack.github.io/docs/configuration.html#...
Moreover, if Uglifier is configured in Webpack for compression, then you will have nothing intelligible in the output You won't see the file at all.