Is webpack good?

I am following a tutorial about react and the instructor uses webpack, so I used it too for few projects.
But then I thought … it builds a huge js file, including the CSS and everything… it is a good practice?
I built a timer/countdown app, and the entire structure (the jsx files, the css) is compiled into a single JS file which has a size of 3.2MB… How good is that as performance? :thinking:

Maybe I miss a peace of the puzzle and I hope you can enlighten me :slight_smile:
Thank you in advance.

P.S. the github repo for the app I was talking about is here.

You should make a production build.
Try to add these lines to your plugins array in webpack and rebuild:

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  }
})

(Actually you should create separate webpack for production build, but just to test it’ll suffice).

2 Likes

It seems like this includes jQuery and Foundation. Going with a production build as @jenovs suggests, you may consider leaving those libraries out of your build and linking via a CDN. In principle, the file loading that Webpack does is freaking awesome and can lead to noticeable improvements in a production site’s download times. In practice, I hate things that are new and trendy and difficult to set up so I prefer using CLI tools with NPM scripts (while I yell at the kids to get off my lawn).

1 Like

What CLI tools do you use (haven’t used any yet) and how do they work/help? :slight_smile:

I prefer using CLI tools with NPM scripts (while I yell at the kids to get off my lawn).

npm install -g grumpy-ol-bugger

4 Likes

You can check out an example from one of my React projects here. I’m not sure they help so much as they just don’t get in my way. What I like to do is split up my terminal window into 3 parts - server, test, and command line. Server and test both run automatically when file changes are detected. I also prefer using Tape to write tests instead of more complicated frameworks. I’ve run into problems trying to do this in a Webpack-y workflow, but I haven’t really delved into Webpack much, either. Webpack 2.0 is due out soon, so I’ll give it another go, but frankly, I wish the same module loading features were available as Browserify plugins.

In the end, it doesn’t matter. Webpack isn’t going anywhere, so we need to learn it.

1 Like

Yeah, I use also 3 terminal windows: 1. webpack, 2. server, 3. command line :slight_smile:
The tutorial I am following is focusing on tests, but I don’t really get them… I understand they are an important piece of the puzzle…

I think that the way testing is usually talked about and taught makes it unnecessarily obtuse. The fact that so many testing libraries have been made with complicated APIs doesn’t help. Yes, testing is hugely important from both a software quality and professional perspective, but don’t feel bad when it gets frustrating.

1 Like