An Efficient Static Assets Pipeline With Webpack

Slide 1

Slide 1 text

An Efﬁcient Static Assets Pipeline With WebPack February 2015

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Agenda 1. What is a static assets pipeline? 2. Why does it matter? 3. What are the requirements? 4. Webpack In Action

Slide 5

Slide 5 text

Sta.c Assets? JS CSS PNG JPEG GIF SVG EOT WOFF TTF SWF TXT …

Slide 6

Slide 6 text

Sta.c Assets Pipeline? Compile Concatenate Minify Compress ...

Slide 7

Slide 7 text

Single Page Applica.on ⌘- aRgh

Slide 8

Slide 8 text

How to ensure Code Quality?

Slide 9

Slide 9 text

Reliability Security Eﬃciency Maintainability

Slide 10

Slide 10 text

All about the code? The Static Assets Pipeline plays a signiﬁcant role in achieving three of those characteristics.

Slide 11

Slide 11 text

Maintainability • Modularity • Dependency Management • Dead Code Elimination The codebase should contain hundreds of ﬁles.

Slide 12

Slide 12 text

Eﬃciency • Web Performance • Minimize the number of HTTP requests • Cache Resources Serve only a few bundles from a CDN

Slide 13

Slide 13 text

Reliability Development Environment == Production Environment !=

Slide 14

Slide 14 text

== Reliability Development Environment == Production Environment

Slide 15

Slide 15 text

Requirements Broad Module Format Compatibility Fast Build Times

Slide 16

Slide 16 text

User Pathway homepage.js login.js app.js plans.js

Slide 17

Slide 17 text

A Faster Website common.js homepage.js login.js app.js plans.js

Slide 18

Slide 18 text

Need for Speed - Craitza

Slide 19

Slide 19 text

$$$ by cutting CDN costs Save

Slide 20

Slide 20 text

Requirements Broad Module Format Compatibility Fast Build Times Create Common Bundle(s)

Slide 21

Slide 21 text

app.js SPA -‐ Mul.ple Sec.ons section 1 common.js section 2 section 3

Slide 22

Slide 22 text

On-‐Demand Loading app.js section 1 common.js section 2 section 3

Slide 23

Slide 23 text

Requirements Broad Module Format Compatibility Fast Build Times Create Common Bundle(s) Load Files On Demand

Slide 24

Slide 24 text

Caching HTTP Validation Model HTTP Expiration Model

Slide 25

Slide 25 text

HTTP Valida.on Model BROWSER SERVER 200 OK Etag: 776cdb1 (data) HTTP Header Last-Modified / If-Modified-Since Etag / If-None-Match GET/ ﬁle

Slide 26

Slide 26 text

HTTP Valida.on Model BROWSER SERVER 304 Not Modiﬁed (no message-body) HTTP Header Last-Modified / If-Modified-Since Etag / If-None-Match GET/ ﬁle If-None-Match: 776cdb1

Slide 27

Slide 27 text

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/ ﬁle

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Cache Busting Explosion - Itsme1985

Slide 30

Slide 30 text

Assets Versioning Per-release strategy - /1.2.0/js/common.js - /1.2.0/js/homepage.js Per-ﬁle strategy - /js/common.a36k2i672.js - /js/homepage.f7we0kiq.js

Slide 31

Slide 31 text

More complex than it seems Filenames must be updated in: • Server-side templates • Client-side templates • CSS (background-image, font-face, ...)

Slide 32

Slide 32 text

Requirements Broad Module Format Compatibility Fast Build Times Create Common Bundle(s) Load Files On Demand Version Assets On A Per-ﬁle Basis

Slide 33

Slide 33 text

On The Lookout For A Bundler

Slide 34

Slide 34 text

The main contenders

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Browserify Module Format Compatibility CommonJS, AMD*, ES6* Fast Build Times OK Create common bundles Yes ( w/ plugin) Load ﬁles on demand No Version assets per ﬁle No

Slide 37

Slide 37 text

The Outsider Standing Out - Ben Cameron

Slide 38

Slide 38 text

Webpack by Tobias Koppers

Slide 39

Slide 39 text

Compa.ble Module Formats • AMD • CommonJS • ES6 Modules (with a loader)

Slide 40

Slide 40 text

Compila.on Time in seconds for 33 bundles Browserify Webpack 0 7.5 15 22.5 30

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Why only JavaScript?! Modules are more than JavaScript ﬁles. require("./style.less"); require("./template.jade"); require("./image.png");

Slide 43

Slide 43 text

Loaders Transform the module content at build time. { test: /\.jade$/, loader: "jade" }, { test: /\.css$/, loader: "style!css" }, { test: /\.png$/, loader: "url?limit=500" }

Slide 44

Slide 44 text

Serving Suggestion:

Slide 45

Slide 45 text

webpack -‐-‐watch Incremental builds DEMO: Sample Application on Github

Slide 46

Slide 46 text

Webpack Dev Server Hot Module Replacement DEMO: https://github.com/theasta/paris-webpack- react#demo-5---webpack-dev-server-and-hot- module-replacement

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

On-‐Demand Loading?

Slide 49

Slide 49 text

Code SpliRng

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

On-‐Demand Loading DEMO: https://github.com/theasta/paris-webpack- react#demo-3---code-splitting

Slide 52

Slide 52 text

Assets Versioning Version all required ﬁles automatically and update all ﬁlenames accordingly DEMO: https://github.com/theasta/paris-webpack- react#demo-4---assets-versioning

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

but there is more...

Slide 55

Slide 55 text

≈ 3% smaller Bundles size (homepage + login funnel) 0 150 300 450 600 Webpack RequireJS

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Performance RequireJS Webpack 0 1.25 2.5 3.75 5 DomContentLoaded Load

Slide 58

Slide 58 text

Dynamic Require require("./models/" + type + ".js"); Includes all JS ﬁles in the models folder. Especially useful with the FactoryPattern and templates.

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Pro Tips

Slide 61

Slide 61 text

CommonJS

Slide 62

Slide 62 text

OccurrenceOrderPlugin Highly recommended! Ensure the hash digest remains exactly the same between two builds of the same codebase.

Slide 63

Slide 63 text

Shimming • Webpack for browserify users • Webpack for RequireJS • exports = exports loader • deps = imports loader • paths = resolve.alias

Slide 64

Slide 64 text

Resources • Webpack Conﬁguration Helper • Version Retrieval Plugin • Temporary Async Loader: head.load.js • Assets Versioning Plugin: grunt-assets-versioning

Slide 65

Slide 65 text

La Fin • Alexandrine Boissière - @theasta • Sample Application:  github.com/theasta/paris-webpack-react • Webpack:  webpack.github.io Tube - tullstedt.se