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
Рамиль Х
6 months 5 days ago

Thanks for the subtitles

3m0_Wr3ck
Guest
3m0_Wr3ck
6 months 5 days ago

grreeeaattt now I need magic regex and perl tshirts

Duo Zhai
Guest
Duo Zhai
6 months 6 days ago

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

Lannister
Guest
Lannister
6 months 7 days ago

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

Jesse Hattabaugh
Guest
Jesse Hattabaugh
6 months 8 days 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 months 8 days ago

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

Addy Osmani
Guest
Addy Osmani
6 months 8 days 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 months 8 days 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 months 8 days ago

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

Kevin Farrugia
Guest
Kevin Farrugia
6 months 8 days 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
6 months 5 days 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 months 8 days 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 months 8 days ago

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

Addy Osmani
Guest
Addy Osmani
6 months 8 days ago

Spaceship! Thanks for the studio props love.

Yair Haimovitch
Guest
Yair Haimovitch
6 months 9 days 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 months 7 days ago

Wow, that's a very nice plugin!

Yair Haimovitch
Guest
Yair Haimovitch
6 months 8 days 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 months 8 days 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