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
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
Amazon Qを使ってIaCを触ろう!
maruto
0
420
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
初めてDefinitelyTypedにPRを出した話
syumai
0
420
flutterkaigi_2024.pdf
kyoheig3
0
150
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
イベント駆動で成長して委員会
happymana
1
340
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Better Code Design in PHP
afilina
PRO
0
130
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Git: the NoSQL Database
bkeepers
PRO
427
64k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
YesSQL, Process and Tooling at Scale
rocio
169
14k
How to Ace a Technical Interview
jacobian
276
23k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
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