DEV Community

Cover image for Optimizing front-end delivery with Webpack 4

Optimizing front-end delivery with Webpack 4

Jesal Gadhia on May 07, 2018

With the latest major Webpack release (version 4.x), we are at a point where you don't need a config to get started. It is optimized by default (#0...
Collapse
 
aodev profile image
AoDev

Thanks, we don't always have the time to "diff" a build configuration for a major upgrade of webpack. Nice summary. :)
BTW, using module lazy loading, it used to need a well configured serie of plugins to avoid hash changing all the time for each chunk, even without code changes. Have you checked that hashes are constant?

Collapse
 
jesalg profile image
Jesal Gadhia • Edited

Interesting, I just verified, the hashes do stay consistent through multiple builds as long as the contents don't change.

Might be some other that plugin may be constantly changing something in your build or just a bug in Webpack that probably got fixed in later versions.

Collapse
 
pavelloz profile image
Paweł Kowalski

Theres hash and contenthash. The latter is computed from chunk content (is deterministic, i hope), so the same input gives same output. Hash is global for the build afair.

Collapse
 
remejuan profile image
Reme Le Hane

I would not use that babel config if I were you, take a look at jamie.build/last-2-versions

Collapse
 
jesalg profile image
Jesal Gadhia

That's a very good point although I think using last 2 major versions, not dead vs a % might be a more robust alternative. That will remove older browsers that aren't supported any longer as well as include the latest versions regardless of market share.

Collapse
 
pavelloz profile image
Paweł Kowalski

Too much targetting of old browsers and you end up with a lot more code than is feasible. Sometimes its just better to let users know that old, insecure browser is not supported.

Collapse
 
shelldandy profile image
Miguel Palau

I'd remove the exclude: node_modules from the babel config that way we can use the "module" field from the package.json of each dependency and get better treeshaking.

Collapse
 
jesalg profile image
Jesal Gadhia

Interesting, I didn't think of that. In my production app, I actually had to put all node_modules through babel for better browser compatibility but I've always considered it big no no since it increases build time.

Collapse
 
shelldandy profile image
Miguel Palau

yeah that's why for example create-react-app sets cache to true for stuff coming from node_modules and no cache for stuff coming from our includes :)

Collapse
 
aditya1996gupta profile image
ADITYA KUMAR GUPTA

i am getting warn from your recent repo : pevn

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: webpack.js.org/configuration/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
index.12b2edea2b42c9e4ac90.js (981 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
index (981 KiB)
index.css
index.12b2edea2b42c9e4ac90.js

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit webpack.js.org/guides/code-splitting/
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!client/css/index.css:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./client/css/index.css 358 bytes {0} [built]
[1] ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB {0} [built]
ℹ 「wdm」: Compiled with warnings.

Collapse
 
pavelloz profile image
Paweł Kowalski

Very good article!

Collapse
 
jrkd profile image
Jono

This is great. Nice work Jesal!

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

Noice! 👍

Collapse
 
grantralls profile image
Grant Ralls

I understand the importance of Babel pretty easily. I don't see the importance of Webpack and when it would be best used. Can someone help me out?

Collapse
 
pavelloz profile image
Paweł Kowalski

Well, the async imports are done by webpack. Modules resolution. Minification. And couple more if you add plugins ;)

Collapse
 
rivayudha profile image
Riva Yudha

Exactly what I’m looking for! Thanks, Jesal.

Collapse
 
jai_type profile image
Jai Sandhu

Thanks! I keep getting invalid sourcemap errors, any idea what that could be?