Published on August 11, 2017 by Chrome

Learn how to keep your Webpack JavaScript bundles as small as possible in this new episode with Matt and Addy. They cover code-snippets for ensuring you’re minifying and splitting up your bundles efficiently.

Webpack for Real Tasks: Decreasing Front-End Size and Improving Caching: goo.gl/uhXaNa

Getting the Most out of CommonsChunkPlugin: goo.gl/DfrVi7

Vendor and Code Splitting in Webpack 2: goo.gl/JlohdZ

Watch more episodes of Totally Tooling Tips here: goo.gl/IoXka7?

Subscribe to the Chrome Developers channel at goo.gl/LLLNvf

Leave a Reply

64 Comments on "Totally Tooling Tips: Webpack Tips"

Notify of
avatar

Рамиль Х
Guest
Рамиль Х
3 days 22 hours ago

Thanks for the subtitles

3m0_Wr3ck
Guest
3m0_Wr3ck
3 days 23 hours ago

grreeeaattt now I need magic regex and perl tshirts

Duo Zhai
Guest
Duo Zhai
4 days 17 hours ago

I found some third party module can not be uglify, only can import from local but not node_modules.

Lannister
Guest
Lannister
5 days 20 hours ago

Damn frontend guys… No Doom or Starcraft posters, just unicorns… 😀

Jesse Hattabaugh
Guest
Jesse Hattabaugh
6 days 13 hours ago

"I don't know how they work but you should use them" — every dev talking about ES modules

Jesse Hattabaugh
Guest
Jesse Hattabaugh
6 days 11 hours ago

I'm just gonna stick to CJS till y'all figure it out for me 😉

Addy Osmani
Guest
Addy Osmani
6 days 12 hours ago

Hah! 🙂 I feel you. Proper end-to-end optimisation for ES Modules still feels way more painful than it should be. e.g: we run into a lot of fun problems with tree-shaking not working where we'd expect at work. We'll get there..someday.

Hannan Ali
Guest
Hannan Ali
6 days 13 hours ago

My Pakistani mom would kill me if I ever tried to have a hairstyle like Addy. But that's a cool hairstyle.

Pierre Dupuis
Guest
Pierre Dupuis
6 days 17 hours ago

I love the narwhal on the right! Where can I find one? Thanks for the video ☺️

Kevin Farrugia
Guest
Kevin Farrugia
6 days 20 hours ago

When using ExtractTextPlugin for SASS, do you favour creating a separate entry in the webpack.config file for the SCSS file which in turn imports the different partials and then including the output CSS file in the HTML directly; or referencing each partial SCSS files within the JavaScript?

Gilad Peleg
Guest
Gilad Peleg
4 days 2 hours ago

If you add a hash to the output css file (for long-term caching) then you won't be able to directly reference it in the html file (unless that is generated as well)

Addy Osmani
Guest
Addy Osmani
6 days 12 hours ago

I prefer creating a separate entry in my webpack config for the SCSS file and then referencing the final output files in HTML directly.

Sasuke Sarutobi
Guest
Sasuke Sarutobi
6 days 22 hours ago

Great tips, great Benny sticker, and great narwhal pencil case!

Addy Osmani
Guest
Addy Osmani
6 days 12 hours ago

Spaceship! Thanks for the studio props love.

Yair Haimovitch
Guest
Yair Haimovitch
7 days 10 hours ago

If you use VSCode you can use this plugin to help reduce the bundle size:marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Иван Панкратов
Guest
Иван Панкратов
6 days 2 hours ago

Wow, that's a very nice plugin!

Yair Haimovitch
Guest
Yair Haimovitch
6 days 11 hours ago

Gzip sizes are now displayed. You can choose (configuration) whether you want to see the minified size, gzipped size or both at once.

Addy Osmani
Guest
Addy Osmani
6 days 12 hours ago

The import-cost plugin is awesome. I'd love to see support for gzip sizes being previewed inline too so you get a sliiiiightly closer view of the final cost when deciding what to import statically.

1 2 3
wpDiscuz