Published on August 11, 2017 by Chrome
Want create site? Find Free WordPress Themes and plugins.

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

Did you find apk for android? You can find new Free Android Games and apps.

Leave a Reply

64 Comments on "Totally Tooling Tips: Webpack Tips"

Notify of
avatar

Рамиль Х
Guest
Рамиль Х
3 months 25 days ago

Thanks for the subtitles

3m0_Wr3ck
Guest
3m0_Wr3ck
3 months 25 days ago

grreeeaattt now I need magic regex and perl tshirts

Duo Zhai
Guest
Duo Zhai
3 months 26 days ago

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

Lannister
Guest
Lannister
3 months 27 days ago

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

Jesse Hattabaugh
Guest
Jesse Hattabaugh
3 months 28 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
3 months 27 days ago

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

Addy Osmani
Guest
Addy Osmani
3 months 27 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
3 months 28 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
3 months 28 days ago

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

Kevin Farrugia
Guest
Kevin Farrugia
3 months 28 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
3 months 25 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
3 months 27 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
3 months 28 days ago

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

Addy Osmani
Guest
Addy Osmani
3 months 27 days ago

Spaceship! Thanks for the studio props love.

Yair Haimovitch
Guest
Yair Haimovitch
3 months 28 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
Иван Панкратов
3 months 27 days ago

Wow, that's a very nice plugin!

Yair Haimovitch
Guest
Yair Haimovitch
3 months 27 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
3 months 27 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