- WHY USE WEBPACK FOR NON SPA FULL
- WHY USE WEBPACK FOR NON SPA SOFTWARE
- WHY USE WEBPACK FOR NON SPA CODE
Before we add vendor splitting, let’s take a look at the current production build output first.
WHY USE WEBPACK FOR NON SPA CODE
You can do this - and other code splitting techniques, as we will see in a minute - with the SplitChunksPlugin.
Vendor splitting means creating separate bundles for your application code and third-party libraries. Vendor bundles can thus be cached for a longer time, which benefits returning users. Your application code simply changes more often than the vendor code because you adjust versions of your dependencies less frequently. Is this a problem? Yes, because for any kind of app, you should separate the vendor chunks from your application chunks due to caching purposes. and lodash.js are found redundantly in both bundles. Let’s analyze the current state of our production build. Separate application code and third-party libsĬheck out the vendor-splitting branch. index.html looks similar and only includes the app bundle and app.css. Webpack only includes the script for the profile bundle in the generated dist/profile.html file, along with a link to the corresponding profile.css. For example, you can provide a custom chunk-sorting function with chunksSortMode, as demonstrated here. There are even more configuration options. When you invoke npm run build:analyze, an interactive view opens on Our initial version of the demo project consists of only one bundle named app.js because we only defined a single entry point. "build:analyze": "npm run build -env.addons=bundleanalyzer" "dev:analyze": "npm run dev -env.addons=bundleanalyzer", The following two npm scripts run a webpack build (development or production) and open up the bundle analyzer: // package.json In so doing, you realize what components really reside inside your bundles and find out which components and dependencies make up the bulk of their size - and you may discover modules that got there by mistake. You should use the awesome webpack-bundle-analyzer plugin regularly to understand what your bundles consist of.
WHY USE WEBPACK FOR NON SPA FULL
Click here to see the full demo with network requests // If you check out the branch use-production-mode, you can see how the app bundle size increases when you set the mode to "development" because some optimizations are not performed. Open dist/static/app.js and you can see for yourself that webpack has uglified our bundle. If you run npm run build (on the master branch), you get the following output: Throughout this article, we explain some of the performance-related configuration options that you can define as you wish for your project. However, you can tweak the configuration by overriding the default values.
WHY USE WEBPACK FOR NON SPA SOFTWARE
Webpack 4 has adopted the software engineering paradigm convention over configuration, which basically means that you get a meaningful configuration simply by setting the mode to "production". I want to emphasize this because you get a number of built-in optimizations automatically, such as tree shaking, performance hints, or minification with the TerserWebpackPlugin in production mode. You should always ship a production build to your users. Webpack 4 has introduced development and production modes. } Use production mode for built-in optimization "dev": "webpack-dev-server -env.env=dev", Just execute npm run dev to take a look at the project (the app opens on // package.json The master branch represents the demo app, along with its initial webpack configuration. Just switch to the mentioned branch so you can see for yourself the effects of the adjustments. You can follow along the examples with my demo project. Furthermore, the possibilities to tweak webpack’s configuration are endless, and you need extensive knowhow to do it the right way for your project. However, you have to understand a fair number of concepts to reap their performance benefits. Webpack 4 comes with appropriate presets. I like this React + webpack 4 boilerplate project, which is also the basis of this blog’s accompanying demo project. Building on this, you can make project-specific adjustments. In addition, I recommend using a starter kit or a modern boilerplate project with webpack configuration best practices already in place. Module bundlers are built by brilliant people just to help you with these difficult tasks.
These days, you have to use a module bundler like webpack to benefit from a development workflow that utilizes state-of-the-art performance optimization concepts.
An in-depth guide to performance optimization with webpack My fire for web development still blazes. Sebastian Weber Follow Frontend developer from Germany.
0 kommentar(er)
