Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
An Efficient Static Assets Pipeline With Webpack
Search
Alexandrine Boissière
February 24, 2015
Programming
7
2.4k
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
Share
Other Decks in Programming
See All in Programming
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
280
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
3
850
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.4k
プログラミング教育のコスパの話
superkinoko
0
100
イベントソーシングによってインピーダンスミスマッチから解放された話
tkawae
1
280
もう一人で悩まない! 個の知見をチームの知見にする3つの習慣と工夫 / Into team knowledge.
honyanya
3
500
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
100
ニックトレイン登壇資料
ryotakurokawa
0
120
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
350
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
4
1.2k
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
630
アーキテクトと美学 / Architecture and Aesthetics
nrslib
11
2.7k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
4 Signs Your Business is Dying
shpigford
183
22k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
Agile that works and the tools we love
rasmusluckow
328
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Gamification - CAS2011
davidbonilla
80
5.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
690
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Transcript
An Efficient Static Assets Pipeline With WebPack February 2015
About me Alexandrine Boissière Technical Engineering Manager at Hootsuite @theasta
None
Agenda 1. What is a static assets pipeline? 2. Why
does it matter? 3. What are the requirements? 4. Webpack In Action
Sta.c Assets? JS CSS PNG JPEG GIF SVG EOT WOFF
TTF SWF TXT …
Sta.c Assets Pipeline? Compile Concatenate Minify Compress ...
Single Page Applica.on ⌘- aRgh
How to ensure Code Quality?
Reliability Security Efficiency Maintainability
All about the code? The Static Assets Pipeline plays a
significant role in achieving three of those characteristics.
Maintainability • Modularity • Dependency Management • Dead Code Elimination
The codebase should contain hundreds of files.
Efficiency • Web Performance • Minimize the number of HTTP
requests • Cache Resources Serve only a few bundles from a CDN
Reliability Development Environment == Production Environment !=
== Reliability Development Environment == Production Environment
Requirements Broad Module Format Compatibility Fast Build Times
User Pathway homepage.js login.js app.js plans.js
A Faster Website common.js homepage.js login.js app.js plans.js
Need for Speed - Craitza
$$$ by cutting CDN costs Save
Requirements Broad Module Format Compatibility Fast Build Times Create Common
Bundle(s)
app.js SPA -‐ Mul.ple Sec.ons section 1 common.js section 2
section 3
On-‐Demand Loading app.js section 1 common.js section 2 section 3
Requirements Broad Module Format Compatibility Fast Build Times Create Common
Bundle(s) Load Files On Demand
Caching HTTP Validation Model HTTP Expiration Model
HTTP Valida.on Model BROWSER SERVER 200 OK Etag: 776cdb1 (data)
HTTP Header Last-Modified / If-Modified-Since Etag / If-None-Match GET/ file
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
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
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
Cache Busting Explosion - Itsme1985
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
More complex than it seems Filenames must be updated in:
• Server-side templates • Client-side templates • CSS (background-image, font-face, ...)
Requirements Broad Module Format Compatibility Fast Build Times Create Common
Bundle(s) Load Files On Demand Version Assets On A Per-file Basis
On The Lookout For A Bundler
The main contenders
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
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
The Outsider Standing Out - Ben Cameron
Webpack by Tobias Koppers
Compa.ble Module Formats • AMD • CommonJS • ES6 Modules
(with a loader)
Compila.on Time in seconds for 33 bundles Browserify Webpack
0 7.5 15 22.5 30
None
Why only JavaScript?! Modules are more than JavaScript files. require("./style.less");
require("./template.jade"); require("./image.png");
Loaders Transform the module content at build time. { test:
/\.jade$/, loader: "jade" }, { test: /\.css$/, loader: "style!css" }, { test: /\.png$/, loader: "url?limit=500" }
Serving Suggestion:
webpack -‐-‐watch Incremental builds DEMO: Sample Application on Github
Webpack Dev Server Hot Module Replacement DEMO: https://github.com/theasta/paris-webpack- react#demo-5---webpack-dev-server-and-hot- module-replacement
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
On-‐Demand Loading?
Code SpliRng
None
On-‐Demand Loading DEMO: https://github.com/theasta/paris-webpack- react#demo-3---code-splitting
Assets Versioning Version all required files automatically and update all
filenames accordingly DEMO: https://github.com/theasta/paris-webpack- react#demo-4---assets-versioning
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
but there is more...
≈ 3% smaller Bundles size (homepage + login funnel) 0
150 300 450 600 Webpack RequireJS
None
Performance RequireJS Webpack 0 1.25 2.5 3.75 5 DomContentLoaded Load
Dynamic Require require("./models/" + type + ".js"); Includes all JS
files in the models folder. Especially useful with the FactoryPattern and templates.
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
Pro Tips
CommonJS
OccurrenceOrderPlugin Highly recommended! Ensure the hash digest remains exactly the
same between two builds of the same codebase.
Shimming • Webpack for browserify users • Webpack for RequireJS
• exports = exports loader • deps = imports loader • paths = resolve.alias
Resources • Webpack Configuration Helper • Version Retrieval Plugin •
Temporary Async Loader: head.load.js • Assets Versioning Plugin: grunt-assets-versioning
La Fin • Alexandrine Boissière - @theasta • Sample Application:
github.com/theasta/paris-webpack-react • Webpack: webpack.github.io Tube - tullstedt.se