Webpack 2 – the Last Bundler You Would Need in 2017 Vijay Dharap, Principal Architect, Infosys
Total Page:16
File Type:pdf, Size:1020Kb
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 Are you a used webpack web before? developer? Have you worked with Used npm anything like ecosystem? webpack? Grunt? Gulp? 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 import * as _ from { 'lodash'; ... import './module2.js'; outputPath: ‘./dist’, webpack import './app.css'; import db from entry: ‘app.js’ './db.json'; } Parser (acorn) import * as $ from 'jquery'; Application modules import { CompA } from App.js './A.Component.ts'; Loader(s) ======================== /* app.css */ App.css Module2.js @import A.Component.ts Db.json '~normalize.css'; Compiler File (bundler) Emitter .brand { Brand.png background-image: 'brand.png'; } Plugins node_modules Normalize.css jquery lodash dist bundle.e266902 brand.eda23 342def232ba33. 2388701db. js 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,Effect ofno webpack minification on build (Step size -00) – 3G Throttled 250 4.5 4 200 3.5 3 150 • Webpacked – DEV (Step-02) 3G Throttle 2.5 2 100 1.5 Request count # count Request Data Transferred (kb) Transferred Data 50 1 (seconds) Taken Time • Webpacked – Production (Step-02) – 3G Throttle 0.5 0 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 Automatic JS What did we attain? Graph Parsing Huge improvement OOTB in Time to Webpack Minification Interactive 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 Bundles Css-loader *.scss Sass-loader Bundles *.html Html-loader Bundles Fonts (*.ttf, *.woff(2), *.eot) url-loader Copies File-loader *.json Json-loader Bundles *.ts To run Step-02Typescript -loader Bundles Images( *jpg, *.pngnpm, *.gif)run serverFile -loader Copies 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 + Without DLL build time = 9.675 s AddAssetsHTMLPlugin With DLL build time = 6.967 s To run Step-04 npm runInternally s4 uses core webpack plugins (DllPlugin and AccessDLLReferencePlugin 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… Optimal size Versatile via Tree loading Shaking and sytem minification Bundling Cache and code busting Goodies like splitting 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 .