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.5k
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
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
230
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.2k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
16k
#QiitaBash MCPのセキュリティ
ryosukedtomita
2
1.5k
ソフトウェア設計とAI技術の活用
masuda220
PRO
23
6.3k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
380
構文解析器入門
ydah
7
1.7k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
180
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
410
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
4 Signs Your Business is Dying
shpigford
184
22k
Embracing the Ebb and Flow
colly
86
4.8k
A better future with KSS
kneath
238
17k
Building Applications with DynamoDB
mza
95
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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