Separating vendor and application code in Webpack for optimized bundling

Question

Separating vendor and application code in Webpack for optimized bundling

Recently, I created a React+Webpack project and noticed that it takes 60 seconds to build the initial bundle, and only 1 second to append incremental changes. Surprisingly, this is without even adding my application code yet! It seems that the node_modules bundle is very resource-intensive. I attempted to split the bundles using common chunks, but unfortunately, it did not result in any performance improvements.

I am curious, how can I configure Webpack to bundle node_modules only once, without continuously watching for updates in this directory?

javascript npm webpack

Answer 1

Answer №1

If you're facing an issue, there's no requirement to package external dependencies in your project. Instead, you can incorporate them as external dependencies by adding the scripts to your page.

For instance, if you decide to include the react and react-dom scripts on your page, you can specify this in the webpack config file like so:

{
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  } 
}

This configuration instructs webpack that whenever it encounters a require('react') or webpack statement, it should return a global variable named React. The same applies for require('react-dom').

Furthermore, when using loaders, ensure to either include the necessary files or exclude those that are not needed.

Here's an example of excluding node_modules:

{
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }
}

Alternatively, for better performance, you can specifically include the required files:

{
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        include: './src',
        loader: 'babel'
      }
    ]
  }
}

Answer 2

If you're facing an issue, there's no requirement to package external dependencies in your project. Instead, you can incorporate them as external dependencies by adding the scripts to your page.

For instance, if you decide to include the react and react-dom scripts on your page, you can specify this in the webpack config file like so:

{
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  } 
}

This configuration instructs webpack that whenever it encounters a require('react') or webpack statement, it should return a global variable named React. The same applies for require('react-dom').

Furthermore, when using loaders, ensure to either include the necessary files or exclude those that are not needed.

Here's an example of excluding node_modules:

{
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }
}

Alternatively, for better performance, you can specifically include the required files:

{
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        include: './src',
        loader: 'babel'
      }
    ]
  }
}

Separating vendor and application code in Webpack for optimized bundling

Answer №1

Similar questions

Tips on finding the ID of a textbox using the cursor's position

Executing a POST request with AJAX in jQuery to communicate across different domains and fetching XML data as

Creating a pair of linked dropdown menus in ReactJS that open simultaneously

Save information in a session using html and javascript

Utilizing various Material UI Sliders on a single page with shared color properties

In a foreach loop, ensure that the subsequent input field is mandated

Ways to stop React from refreshing the page upon clicking the submit button

Conceal the scroll bar while still allowing for scrolling functionality

"I am trying to figure out how to set a link to an image using JavaScript. Can someone help me

Tips for toggling the visibility of a revolution slider based on current time using JavaScript

The margin and width of a div element with the position set to fixed and display set to table-cell are not rendering correctly

Guidelines for setting the path for prettier in npm

The serialize() method in Ajax is not capturing all the data fields from an HTML form

Utilize debounce functionality for custom filtering in a Vuetify data table

Tips for dividing HTML code on a page into individual nodes

The Typescript counterpart to PropTypes.oneOf, utilizing a pre-existing variable

Why does attempting to access an undefined property not trigger an error?

javascript conceal other sections upon hovering

Update the text for the filter search placeholder in the Ant Table component

Guide on dynamically displaying a page based on the response from express/mssql middleware