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.3k
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
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Git Lint
bkuhlmann
4
750
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
180
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
400
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
930
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Docker and Python
trallard
34
2.7k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Debugging Ruby Performance
tmm1
70
11k
Atom: Resistance is Futile
akmur
259
25k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Documentation Writing (for coders)
carmenintech
60
3.9k
Web Components: a chance to create the future
zenorocha
305
41k
Building Your Own Lightsaber
phodgson
99
5.7k
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