An Efficient Static Assets Pipeline With Webpack

Alexandrine Boissière

February 24, 2015

Tweet Share

Transcript

1. An Efficient Static Assets Pipeline With WebPack February 2015

2. About  me Alexandrine Boissière Technical Engineering Manager at Hootsuite @theasta

3. None

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
41. None

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

50. None

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
56. None

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