Embed Size (px)
Citation preview
Webpack 2 – The last bundler you would need in 2017 Vijay Dharap, Principal Architect, Infosys
Speaker Bio
• 14+ Years of experience
• Principal Architect in Infosys
• Passionate about delightful UX
• Open Source Evangelist and contributor
• Organizer for Yearly Tech Conferences within Infosys
2
Before we begin… Let me know you guys a little
Are you a web
developer?
Have you worked with npm ecosystem?
Used anything like webpack? Grunt? Gulp?
Have you have used webpack before?
WORLD WITHOUT WEBPACK
Step-00 – AS-IS no webpack scenario
• npm install
• npm run server
• Access http://localhost:3000/step-00 in chrome.
• Observe loading in chrome devtools network tab
LETS INTRODUCE WEBPACK TO THE MIX…
At its core, Webpack is a…
• Loader – Loads Javascript AND Non-Javascript files for processing. Post processing, it may add it into bundles.
• Bundler – Bundles javascript assets into one or more bundles
• Set of Plugins – add additional functionality to core webpack functionality
App.js
// App.js
import * as _ from
'lodash';
import './module2.js';
import './app.css';
import db from
'./db.json';
import * as $ from
'jquery';
import { CompA } from
'./A.Component.ts';
========================
/* app.css */
@import
'~normalize.css';
.brand {
background-image:
'brand.png';
}
// webpack.config.js
{
...
outputPath: ‘./dist’,
entry: ‘app.js’
}
node_modules
jquery
Normalize.css
lodash
Parser (acorn)
Loader(s)
Compiler (bundler)
File Emitter
webpack
Application modules
dist
Plugins
bundle.e266902342def232ba33.
js
brand.eda232388701db.
png
Module2.js
Db.json
App.css
A.Component.ts
Brand.png
Step-01 – Let redo Step-00 example with webpack
To run Step-01
npm run server
npm run s1
Access http://localhost:3000/step-01 in chrome.
Effect of webpack
• Normal No bundling, no minification (Step-00) – 3G Throttled
• Webpacked – DEV (Step-02) 3G Throttle
• Webpacked – Production (Step-02) – 3G Throttle Step-00 Step-02 - DEV Step-02 - PROD
Data Transferred 66.4 10.4 6.7
Request Count 203 2 2
Time taken 4.11 0.563 0.537
0
0.5
1
1.5
2
2.5
3
3.5
4
4.5
0
50
100
150
200
250
Tim
e Ta
ken
(se
con
ds)
Dat
a Tr
ansf
erre
d (
kb)
Req
ues
t co
un
t #
Effect of webpack on build size
Data Transferred Request Count Time taken
What did we attain?
Webpack
Automatic JS Graph Parsing
OOTB Minification
HTTP Request
Reduction
Huge improvement
in Time to Interactive
LET’S LOAD IT UP!
Step-02 – Load it up!
• Popular loaders
Typical File name patterns Loader Name Bundles OR copies?
*.js(x) babel-loader Bundles
*.css Style-loader Css-loader
Bundles
*.scss Sass-loader Bundles
*.html Html-loader Bundles
Fonts (*.ttf, *.woff(2), *.eot) url-loader File-loader
Copies
*.json Json-loader Bundles
*.ts Typescript-loader Bundles
Images( *jpg, *.png, *.gif) File-loader Copies
To run Step-02
npm run server
npm run s2
Access http://localhost:3000/step-02 in chrome.
What did we attain?
• Automatic parsing of modules from “node_modules” directory via “~” shortcut.
• Tree-shaking (-p only)
• Loaded, Bundled / Copied the modules and other assets into deployable directory
Step-03 – Dev-Server
• A web server via express
• live-reloading via sockjs! Hello BrowserSync!
To run Step-03
npm run s3
Access http://localhost:3000 in chrome.
Step-04 - Customize to your satisfaction!
• Popular plugins
Name Description
DefinePlugin Defines ENV variables. Useful for environment specific variations.
ProvidePlugin Provides for certain symbols so you do not have to declare them.
HtmlWebpackPlugin Creates index.html with script bundle names added into it.
UglifyjsPlugin UglifyJS integration – automatically added for PRODUCTION
DLLBundlesPlugin + AddAssetsHTMLPlugin
Without DLL build time = 9.675 s With DLL build time = 6.967 s Internally uses core webpack plugins (DllPlugin and DLLReferencePlugin)
To run Step-04
npm run s4
Access http://localhost:3000 in chrome.
npm run s4:prod
Step-05 – Code Splitting and Chunking
• Split the JS Chunks
• Different ways to split JS chunks – Add multiple entries – useful to logically split vendors modules.
• Why we should split “vendors” out? App Logical deployments will not “invalidate” the caches.
– Dynamic imports – e.g. lazy loading
• Split out the CSS - ExtractTextWebpackPlugin
To run Step-05
npm run server
npm run s5
Access http://localhost:3000/step-05 in chrome.
What did we achieve?
• Lazy loading things which we do not need for homepage – better TTI
• Splitting vendor – improve on development turnaround time,
– Improve on cacheability in PROD environment
• Splitting CSS out of bundle – Avoids FOUC using ExtractTextWebpack Plugin
• Automatic Cache Busting via hash in bundle name.
• SourceMaps
… so.. We ❤ webpack because…
Bundling and code splitting
Versatile loading sytem
Goodies like dev-sever,
analyzer and awesome
plugins
Cache busting
Optimal size via Tree
Shaking and minification
Credits
• Webpack.js.org
• Survivejs.com
• Repository https://github.com/dharapvj/learning-webpack2
Thank you
