In case your project exceeds the limits, you should see a warning similar to below: WARNING in entrypoint size limit: The following entrypoint (s ) combined asset size exceeds the recommended limit (48.8 KiB ). Since stats can contain errors, so it's a good idea to handle that case separately: const webpack = require ( "webpack" ) const config = require ( "./" ) ( "production" ) webpack (config, (err, stats ) =>, ] ) 0x can generate a flamegraph of webpack execution to understand where time is spent. To capture timing-related information during the build, set profile to true in webpack configuration. This file can be pushed through a variety of tools to understand better what's going on. After a while you should find stats.json at your project root. The above is the basic setup you need, regardless of your webpack configuration. The configuration also gives you more control on fine-tuning other options within both plugins."build:stats" : "wp -mode production -json > stats.json" } } While these shorthand methods are nice, we usually recommend just using the configuration as it's better to understand exactly what is being done for you in both cases. And, webpack -p will automatically invoke both those flags and thus the plugins to be included. The -define _ENV="'production'" will do the same for the DefinePlugin instance described above. For example, the -optimize-minimize flag will include the TerserPlugin behind the scenes. Some of what has been described above can also be achieved by using the command line. Please see the Minimizing for Production section. It is crucial to minimize your CSS for production. const merge = require('webpack-merge') Ĭonst common = require('./') Īvoid inline-*** and eval-*** use in production as they can increase bundle size and reduce the overall performance. For this guide, we'll use the source-map option in the production as opposed to the inline-source-map we used in the development: That said, you should choose one with a fairly quick build speed that's recommended for production use (see devtool). We encourage you to have source maps enabled in production, as they are useful for debugging as well as running benchmark tests.
If you decide to try another minification plugin, just make sure your new choice also drops dead code as described in the tree shaking guide and provide it as the optimization.minimizer. Note that while the TerserPlugin is a great place to start for minification and being used by default, there are other options out there. Webpack v4+ will minify your code by default in production mode. + const path = require('path') + const Ĭonst element = document.createElement('pre') ĭ(component()) Minification
Let's start by installing webpack-merge and splitting out the bits we've already worked on in previous guides: npm install -save-dev webpack-merge With the "common" configuration in place, we won't have to duplicate code within the environment-specific configurations.
In order to merge these configurations together, we'll use a utility called webpack-merge. While we will separate the production and development specific bits out, note that we'll still maintain a "common" configuration to keep things DRY. With this logical separation at hand, we typically recommend writing separate webpack configurations for each environment.
In production, our goals shift to a focus on minified bundles, lighter weight source maps, and optimized assets to improve load time. In development, we want strong source mapping and a localhost server with live reloading or hot module replacement.
The goals of development and production builds differ greatly. Please ensure you are familiar with the concepts/setup introduced in those guides before continuing on.
This walkthrough stems from Tree Shaking and Development. In this guide, we'll dive into some of the best practices and utilities for building a production site or application.