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 Have you have used webpack before? Are you a web developer? Used anything like webpack? Grunt? Gulp? Have you worked with npm ecosystem?
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 // webpack.config.js {... outputpath:./dist, } entry: app.js Application modules App.css App.js A.Component.ts Brand.png node_modules Normalize.css Module2.js Db.json webpack Parser (acorn) Compiler (bundler) Loader(s) Plugins File Emitter 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'; } jquery lodash dist bundle.e266902 342def232ba33. js brand.eda23 2388701db. 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.
Data Transferred (kb) Request count # Time Taken (seconds) Effect of webpack Normal No bundling, no minification (Step-00) 3G Throttled 250 200 Webpacked 150 DEV (Step-02) 3G Throttle 100 50 Effect of webpack on build size Webpacked Production (Step-02) 3G Throttle 0 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 Data Transferred Request Count Time taken 4.5 4 3.5 3 2.5 2 1.5 1 0.5 0
What did we attain? Automatic JS Graph Parsing Huge improvement in Time to Interactive Webpack OOTB Minification HTTP Request Reduction
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 To run Step-02 Typescript-loader Bundles npm run server npm run s2 Access http://localhost:3000/step-02 in chrome. Images( *jpg, *.png, *.gif) File-loader Copies
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 DefinePlugin ProvidePlugin HtmlWebpackPlugin UglifyjsPlugin DLLBundlesPlugin + AddAssetsHTMLPlugin Description Defines ENV variables. Useful for environment specific variations. Provides for certain symbols so you do not have to declare them. Creates index.html with script bundle names added into it. UglifyJS integration automatically added for PRODUCTION Without DLL build time = 9.675 s With DLL build time = 6.967 s To run Step-04 npm run Internally s4 uses core webpack plugins (DllPlugin and Access DLLReferencePlugin) 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 Versatile loading sytem Optimal size via Tree Shaking and minification Bundling and code splitting Cache busting Goodies like dev-sever, analyzer and awesome plugins
Credits Webpack.js.org Survivejs.com Repository https://github.com/dharapvj/learning-webpack2
Thank you
www.modsummit.com www.developersummit.com