


So if you seriously want to understand performance, then please study how the JavaScript engine works. They may tweak results of “artificial tests” compared to “normal usage”, especially when we benchmark something very small, such as how an operator works, or a built-in function. Modern JavaScript engines perform many optimizations.

That may lead to wrong results.įor more reliable benchmarking, the whole pack of benchmarks should be rerun multiple times. And by the time of running bench(diffGetTime) that work has finished.Ī pretty real scenario for a modern multi-process OS.Īs a result, the first benchmark will have less CPU resources than the second. Imagine that at the time of running bench(diffSubtract) CPU was doing something in parallel, and it was taking resources. Wow! Using getTime() is so much faster! That’s because there’s no type conversion, it is much easier for engines to optimize. element.innerHTML = _.Return date2.getTime() - date1.getTime() įor (let i = 0 i < 100000 i++) f(date1, date2) Īlert( 'Time of diffSubtract: ' + bench(diffSubtract) + 'ms' ) Īlert( 'Time of diffGetTime: ' + bench(diffGetTime) + 'ms' ) const element = document.createElement('div') Webpack 5.4.0 compiled successfully in 249 msĪs you can see there's another file generated besides, and .Īlthough using multiple entry points per page is allowed in webpack, it should be avoided when possible in favor of an entry point with multiple imports: entry: = await import('lodash') If we're going to use multiple entry points on a single HTML page, ntimeChunk: 'single' is needed too, otherwise we could get into trouble described here.Īsset 549 KiB (name: shared )Īsset 7.79 KiB (name: runtime )Īsset 1.77 KiB (name: index )Īsset 1.65 KiB (name: another )Įntrypoint index 1.77 KiB = Įntrypoint another 1.65 KiB = Įntrypoint shared 557 KiB = 7.79 KiB 549 KiB The dependOn option allows to share the modules between the chunks: Let's remove this duplication in next section. src/index.js and will thus be duplicated in both bundles. The first of these two points is definitely an issue for our example, as lodash is also imported within.
#Prepros log date and time stamp code#
#Prepros log date and time stamp manual#
However, it is more manual and has some pitfalls we will go over. This is by far the easiest and most intuitive way to split code.
