Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Efficient Static Assets Pipeline With Webpack

An Efficient Static Assets Pipeline With Webpack

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

Alexandrine Boissière

February 24, 2015
Tweet

Other Decks in Programming

Transcript

  1. Agenda 1. What is a static assets pipeline? 2. Why

    does it matter? 3. What are the requirements? 4. Webpack In Action
  2. All  about  the  code? The Static Assets Pipeline plays a

    significant role in achieving three of those characteristics.
  3. Efficiency • Web Performance • Minimize the number of HTTP

    requests • Cache Resources Serve only a few bundles from a CDN
  4. HTTP  Valida.on  Model BROWSER SERVER 200 OK Etag: 776cdb1 (data)

    HTTP Header Last-Modified / If-Modified-Since Etag / If-None-Match GET/ file
  5. 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
  6. 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
  7. More  complex  than  it  seems Filenames must be updated in:

    • Server-side templates • Client-side templates • CSS (background-image, font-face, ...)
  8. Requirements Broad Module Format Compatibility Fast Build Times Create Common

    Bundle(s) Load Files On Demand Version Assets On A Per-file Basis
  9. 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
  10. 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
  11. Loaders Transform the module content at build time. { test:

    /\.jade$/, loader: "jade" }, { test: /\.css$/, loader: "style!css" }, { test: /\.png$/, loader: "url?limit=500" }
  12. 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
  13. Assets  Versioning Version all required files automatically and update all

    filenames accordingly DEMO: https://github.com/theasta/paris-webpack- react#demo-4---assets-versioning
  14. 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
  15. Dynamic  Require require("./models/" + type + ".js"); Includes all JS

    files in the models folder. Especially useful with the FactoryPattern and templates.
  16. 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
  17. Shimming • Webpack for browserify users • Webpack for RequireJS

    • exports = exports loader • deps = imports loader • paths = resolve.alias
  18. Resources • Webpack Configuration Helper • Version Retrieval Plugin •

    Temporary Async Loader: head.load.js • Assets Versioning Plugin: grunt-assets-versioning
  19. La  Fin • Alexandrine Boissière - @theasta • Sample Application:


    github.com/theasta/paris-webpack-react • Webpack:
 webpack.github.io Tube - tullstedt.se