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
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
C++20 射影変換
faithandbrave
0
540
WindowInsetsだってテストしたい
ryunen344
1
200
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Is Xcode slowly dying out in 2025?
uetyo
1
210
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
510
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
XP, Testing and ninja testing
m_seki
3
210
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Language of Interfaces
destraynor
158
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building an army of robots
kneath
306
45k
How STYLIGHT went responsive
nonsquared
100
5.6k
Unsuck your backbone
ammeep
671
58k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Docker and Python
trallard
44
3.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Balancing Empowerment & Direction
lara
1
380
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
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