Recently I started using Webpack with ReactJS, and I encountered such a problem that the build time takes between 150 and 200 seconds, I suspect. that this is not normal)) About 30 plug-ins are stored in /node_modules/ , in babel'e included syntax check only on "my" files. Tell me, how can I speed up the build, or is the normal execution time of 200 seconds?

In the project, there are already about 50 modules (components, actions, reducer).

PPS Here is my version of the config, I will be grateful if you correct it!

 var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require("path"); module.exports = { entry: "./scripts/index", output: { path: path.join(__dirname, 'build'), filename: "bundle.js" }, devtool: 'source-map', module: { loaders: [ { test:/\.js$/, include: __dirname + '/scripts', loader: 'babel' }, { test:/\.css$/, include: __dirname + '/styles', loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test:/\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader') }, { test: /\.(jpe?g|png|gif|svg)$/, loaders: [ 'file-loader?name=img/[name].[ext]', ] }, { test: /\.(eot|svg|ttf|woff|woff2)$/, include: __dirname + '/fonts', loader: 'file-loader?name=fonts/[name].[ext]' }, { test: /\.json$/, loader: 'json' } ] }, devServer: { host: 'localhost', port: 3000 }, plugins: [ new ExtractTextPlugin('bundle.css') ] }; 

Attaching Package.json

 { "name": "gps-frontend", "version": "1.0.0", "author": "lardi-trans", "license": "ISC", "dependencies": { "leaflet": "^0.7.7", "leaflet.icon.glyph": "^0.2.0", "net": "^1.0.2", "react": "^15.1.0", "react-addons-update": "^15.1.0", "react-color-picker": "^3.1.0", "react-dom": "^15.0.0", "react-localization": "0.0.2", "react-redux": "^4.4.5", "redux": "^3.5.1", "redux-logger": "^2.6.1", "sockjs-client": "^1.1.0", "stompjs": "^2.3.3", "traverson": "^3.1.3", "traverson-hal": "^4.1.1" }, "devDependencies": { "babel-core": "^6.7.2", "babel-loader": "^6.2.4", "babel-plugin-object-assign": "^1.2.1", "babel-plugin-transform-es2015-destructuring": "^6.9.0", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "image-webpack-loader": "^1.6.3", "json-loader": "^0.5.4", "react-hot-loader": "^1.3.0", "redux-thunk": "^2.0.1", "style-loader": "^0.13.1", "stylus": "^0.54.2", "stylus-loader": "^2.0.0", "webpack": "^1.12.14" } } 
  • It seems to be not the norm, personally I haven't come across anything for more than a few seconds - andreymal
  • one
    Throw off your webpack.config.js . My assembly takes about 2-3 seconds. / node_modules / should not be assembled, they will (needed) get into the assembly if they are specified in the dependencies of any component in your sources - Vasily Barbashev
  • @ Vasily Barbashev threw his version! - Becherman
  • Some kind of nonsense. And package.json ? + More precisely, how many files are in the /scripts/*.js folder - Vasily Barbashev
  • In the scripts folder, 62 files weighing 125 kb, reassembly in watch mode takes 1.5 - 2 seconds. The first bundle.js collects the longest. Today, for example, 180 seconds (despite the fact that the old bundle was not removed) - Becherman

1 answer 1

Use HOT MODULE REPLACEMENT . then the files will not be re-assembled but only the part where the changes occurred.

  • I will review this moment in the docks and will definitely leave feedback! - Becherman