CODEWITHSUNDEEP
javascriptreactjswebpack
umaru
umaru

Reputation: 178

Can i speed up webpack bundling with react on development?

I know this question in very stupid but i am new in this awesome js/react world, so plese, forgive me.

On my project i use react in frontend and django on a server side. Because on this moment i cant use react routing, i forced to use django routing and include webpack bundles into html files.

So when i develop i do this steps: 1. write code on javasxript/react 2. yarn run webpack --config someconfig.js

So, this bundling propcess takes a very long time. Can i do something to bypass bundling process or speed up it on development?

Upvotes: 0

Views: 700

Answers (2)

Austin
Austin

Reputation: 26

You can use the webpack-dev-server and have a process running that will look for changes and rebuild.

https://webpack.js.org/guides/development/

This will go over developing including talking about the webpack-dev-server. You might also want to take a look at https://browsersync.io/ so that you can be able to have the browser automatically refresh on a new bundle being available.

Upvotes: 1

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36219

Make sure babel-loader uses cache and doesn't transpile node_modules:

webpack:

rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
      },
    },
  },
],

.babelrc

"presets": [
    ["env", { "modules": false }],
    "react",
],

Other than that there are some plugins that aim to speed up rebundling.

Upvotes: 1

Related Questions