An Efficient Static Assets Pipeline With Webpack

Webpack is a module bundler that will revolutionize your static assets pipeline.

Transcript

1. An Efficient Static Assets Pipeline With WebPack February 2015
2. About  me Alexandrine Boissière Technical Engineering Manager at Hootsuite @theasta
4. Agenda 1. What is a static assets pipeline? 2. Why does it matter? 3. What are the requirements? 4. Webpack In Action
5. Sta.c  Assets? JS CSS PNG JPEG GIF SVG EOT WOFF TTF SWF TXT …
6. Sta.c  Assets  Pipeline? Compile Concatenate Minify Compress ...
7. Single  Page  Applica.on ⌘- aRgh
8. How  to  ensure   Code Quality?
9. Reliability   Security   Efficiency   Maintainability
10. All  about  the  code? The Static Assets Pipeline plays a significant role in achieving three of those characteristics.
11. Maintainability • Modularity • Dependency Management • Dead Code Elimination The codebase should contain hundreds of files.
12. Efficiency • Web Performance • Minimize the number of HTTP requests • Cache Resources Serve only a few bundles from a CDN
13. Reliability Development Environment == Production Environment !=
14. == Reliability Development Environment == Production Environment
15. Requirements Broad Module Format Compatibility Fast Build Times
16. User  Pathway homepage.js login.js app.js plans.js
17. A  Faster  Website common.js homepage.js login.js app.js plans.js
18. Need for Speed - Craitza
19. $$$ by cutting CDN costs Save
20. Requirements Broad Module Format Compatibility Fast Build Times Create Common Bundle(s)
21. app.js SPA  -­‐  Mul.ple  Sec.ons section 1 common.js section 2 section 3
22. On-­‐Demand  Loading app.js section 1 common.js section 2 section 3
23. Requirements Broad Module Format Compatibility Fast Build Times Create Common Bundle(s) Load Files On Demand
24. Caching HTTP Validation Model HTTP Expiration Model
25. HTTP  Valida.on  Model BROWSER SERVER 200 OK Etag: 776cdb1 (data) HTTP Header Last-Modified / If-Modified-Since Etag / If-None-Match GET/ file
26. HTTP  Valida.on  Model BROWSER SERVER 304 Not Modified (no message-body) HTTP Header Last-Modified / If-Modified-Since Etag / If-None-Match GET/ file If-None-Match: 776cdb1
27. HTTP  Expira.on  Model HTTP Header Cache-Control: max-age=3600 Expires: Tue, 26 Mar 2015 05:00:00 GMT BROWSER SERVER 200 OK Cache-control: max-age= 2628000 (data) GET/ file
28. HTTP  Expira.on  Model HTTP Header Cache-Control: max-age=3600 Expires: Tue, 26 Mar 2015 05:00:00 GMT BROWSER SERVER No Round-Trip
29. Cache Busting Explosion - Itsme1985
30. Assets  Versioning Per-release strategy - /1.2.0/js/common.js - /1.2.0/js/homepage.js Per-file strategy - /js/common.a36k2i672.js - /js/homepage.f7we0kiq.js
31. More  complex  than  it  seems Filenames must be updated in: • Server-side templates • Client-side templates • CSS (background-image, font-face, ...)
32. Requirements Broad Module Format Compatibility Fast Build Times Create Common Bundle(s) Load Files On Demand Version Assets On A Per-file Basis
33. On The Lookout For A Bundler
34. The main contenders
35. RequireJS Module Format Compatibility AMD, CommonJS* Fast Build Times No  (  too  slow  on  Dev) Create common bundles Yes ( w/ manual config) Load files on demand Yes Version assets per file No
36. Browserify Module Format Compatibility CommonJS, AMD*, ES6* Fast Build Times OK Create common bundles Yes ( w/ plugin) Load files on demand No Version assets per file No
37. The Outsider Standing Out - Ben Cameron
38. Webpack by Tobias Koppers
39. Compa.ble  Module  Formats • AMD • CommonJS • ES6 Modules (with a loader)
40. Compila.on  Time  in  seconds   for  33  bundles Browserify Webpack 0 7.5 15 22.5 30
42. Why  only  JavaScript?! Modules are more than JavaScript files. require("./style.less"); require("./template.jade"); require("./image.png");
43. Loaders Transform the module content at build time. { test: /\.jade$/, loader: "jade" }, { test: /\.css$/, loader: "style!css" }, { test: /\.png$/, loader: "url?limit=500" }
44. Serving Suggestion:
45. webpack  -­‐-­‐watch Incremental builds DEMO: Sample Application on Github
46. Webpack  Dev  Server Hot Module Replacement DEMO: https://github.com/theasta/paris-webpack- react#demo-5---webpack-dev-server-and-hot- module-replacement
47. Common  Chunks webpack.optimize.CommonsChunkPlugin can automatically create a common bundle. Webpack analysis tool can provide hints. DEMO: https://github.com/theasta/paris-webpack- react#demo-2---common-chunks
48. On-­‐Demand  Loading?
49. Code  SpliRng
51. On-­‐Demand  Loading DEMO: https://github.com/theasta/paris-webpack- react#demo-3---code-splitting
52. Assets  Versioning Version all required files automatically and update all filenames accordingly DEMO: https://github.com/theasta/paris-webpack- react#demo-4---assets-versioning
53. Webpack ✓ Broad Module Format Compatibility ✓ Fast Build Times ✓ Create Common Bundle(s) ✓ Load Files On Demand ✓ Version Assets Per File ✓ [bonus] Update Assets Filenames In Templates and CSS
54. but there is more...
55. ≈  3%  smaller Bundles size (homepage + login funnel) 0 150 300 450 600 Webpack RequireJS
57. Performance RequireJS Webpack 0 1.25 2.5 3.75 5 DomContentLoaded Load
58. Dynamic  Require require("./models/" + type + ".js"); Includes all JS files in the models folder. Especially useful with the FactoryPattern and templates.
59. Embedded  Stylesheets • Possible to include CSS directly in JavaScript • Eliminate CSS bottleneck by breaking down styles in smaller chunks that can be loaded on demand. • Possible to extract the styles with the extract- text-webpack-plugin
60. Pro Tips
61. CommonJS
62. OccurrenceOrderPlugin Highly recommended! Ensure the hash digest remains exactly the same between two builds of the same codebase.
63. Shimming • Webpack for browserify users • Webpack for RequireJS • exports = exports loader • deps = imports loader • paths = resolve.alias
64. Resources • Webpack Configuration Helper • Version Retrieval Plugin • Temporary Async Loader: head.load.js • Assets Versioning Plugin: grunt-assets-versioning
65. La  Fin • Alexandrine Boissière - @theasta • Sample Application:
 github.com/theasta/paris-webpack-react • Webpack:
 webpack.github.io Tube - tullstedt.se