![]() Webpack automatically supplies the checkResource filter function as part of the IgnorePlugin. To reduce your bundle size, you can use Webpack’s built-in IgnorePlugin, which lets you use regular expressions or filter functions to specify which modules Webpack should skip during compilation. The remaining volume consists of locales, each represented by a segment of the large outer ring and belonging to the locale folder: Note that the core moment.js library takes up 188 KiB - a little over a quarter of the bundle’s volume: This is because Webpack imports every Moment locale, regardless of whether it’s used, by default. The bundle now takes up an enormous 744.4 KiB. ![]() Upload moment-stats-raw-dev.json or your equivalent stats.json file to examine your bundle: It was used often in applications requiring internationalization because it included a set of locales (like en_US).Įach locale provides information about time zones and the standardized date and time formats for a particular country, letting an application manage and display dates based on a user's language. Moment.js used to be a popular library (again, it’s now deprecated) that provided a suite of functions to generate, parse, validate, and manipulate dates and times. In the project’s root directory, create a Webpack configuration file named and enter the following code into it: Moment.js The relevant value in this demonstration is the actual size. The output for your baseline bundle should have a raw size of 0.3 KiB and an actual size of 1.5 KiB. To examine the size of the starting bundle, upload baseline-stats-dev.json to the Webpack Visualizer. As you step through each optimization, import the modules into src/index.js and trim them using the provided techniques. The only packages installed at this point are webpack and webpack-cli. These are the project files that will be used to generate the baseline Webpack bundle: The starting bundle consists of a JavaScript project with a few small files. Although the default value is production, non-trivial projects typically benefit from the verbose comments and the useful component names that Webpack includes in development. The mode option tells Webpack how to configure its optimizations for the bundle’s intended use. If you prefer to build the bundle in a more hands-on approach, start by setting the mode option to development. ![]() You can find all the code files for this walkthrough on GitHub. To follow along in this walkthrough at a higher level, upload the stats file provided for each step. When you upload a bundle’s stats file, the visualizer displays the dependency graph in your bundle as a radial tree. We’ll use Webpack Visualizer by Chris Bateman to determine which modules contribute the most to your bundle’s size. ![]()
0 Comments
Leave a Reply. |