Webpack 2 The last bundler you would need in Vijay Dharap, Principal Architect, Infosys

Transcription

1 Webpack 2 The last bundler you would need in 2017 Vijay Dharap, Principal Architect, Infosys

2 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

3 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?

4 WORLD WITHOUT WEBPACK

5 Step-00 AS-IS no webpack scenario npm install npm run server Access in chrome. Observe loading in chrome devtools network tab

6 LETS INTRODUCE WEBPACK TO THE MIX

7 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

8 // 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 '~normalize.css';.brand { background-image: 'brand.png'; } jquery lodash dist bundle.e def232ba33. js brand.eda db. png

9 Step-01 Let redo Step-00 example with webpack To run Step-01 npm run server npm run s1 Access in chrome.

10 Data Transferred (kb) Request count # Time Taken (seconds) Effect of webpack Normal No bundling, no minification (Step-00) 3G Throttled Webpacked 150 DEV (Step-02) 3G Throttle Effect of webpack on build size Webpacked Production (Step-02) 3G Throttle 0 Step-00 Step-02 - DEV Step-02 - PROD Data Transferred Request Count Time taken Data Transferred Request Count Time taken

11 What did we attain? Automatic JS Graph Parsing Huge improvement in Time to Interactive Webpack OOTB Minification HTTP Request Reduction

12 LET S LOAD IT UP!

13 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 in chrome. Images( *jpg, *.png, *.gif) File-loader Copies

14 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

15 Step-03 Dev-Server A web server via express live-reloading via sockjs! Hello BrowserSync! To run Step-03 npm run s3 Access in chrome.

16 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 = s With DLL build time = s To run Step-04 npm run Internally s4 uses core webpack plugins (DllPlugin and Access DLLReferencePlugin) in chrome. npm run s4:prod

17 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 in chrome.

18 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

19 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

20 Credits Webpack.js.org Survivejs.com Repository

21 Thank you

22