Dobrý deň, bratia v Bratislave Hello Folks!

Kamlesh Chandnani Frontend Engineer : Mobisy Technologies, Bangalore : @_kamlesh_ : kamleshchandnani

Progressive Loading… “Less code loaded better, improves performance.”

Why?

No content

Giant Pizza = Main App Bundle Without Code Splitting

Pizza Slicer = Code Splitting

Pizza Slice = Code Splitted Bundle

Checklist ☑ Configure webpack ☑ Use Dynamic Imports ☑ Configure routes to load async bundle

const plugins = [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity, filename: "js/vendor.bundle-[chunkhash:8].js" }), new webpack.optimize.CommonsChunkPlugin({ async: true, children: true, minChunks: 4, filename: "js/commonlazy-[chunkhash:8].js" }), new webpack.optimize.CommonsChunkPlugin({ name: "runtime" }) ]; Checklist ➔ Configure webpack ▢ Use Dynamic Imports ▢ Configure routes to load async bundle

const plugins = [ new webpack.optimize.CommonsChunkPlugin({ // extract the vendor chunk into separate chunk name: "vendor", // Name of the chunk minChunks: Infinity, // Creates a chunk but no extra modules are moved into it filename: "js/vendor.bundle-[chunkhash:8].js" // Output filename of the vendor chunk }), new webpack.optimize.CommonsChunkPlugin({ async: true, children: true, minChunks: 4 }), new webpack.optimize.CommonsChunkPlugin({ name: "runtime" }) ];

const plugins = [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity, filename: "js/vendor.bundle-[chunkhash:8].js" }), new webpack.optimize.CommonsChunkPlugin({ async: true, // Only code split bundles will be scanned children: true, // all children of the commons chunk are selected minChunks: 4, // The minimum number of chunks which need to contain a module }), new webpack.optimize.CommonsChunkPlugin({ name: "runtime" }) ];

const plugins = [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity, filename: "js/vendor.bundle-[chunkhash:8].js" }), new webpack.optimize.CommonsChunkPlugin({ async: true, children: true, minChunks: 4 }), new webpack.optimize.CommonsChunkPlugin({ name: "runtime" // to retain the vendor chunks hash when it's not changed // The runtime is the part of Webpack that resolves modules at runtime. If you add a CommonsChunkPlugin with the name of a chunk that does not exist as the name of an entry-point Webpack will extract the runtime, create a chunk by that name and put the runtime in there })];

Fact: Sequence of “CommonsChunkPlugin” matters

module.exports = { entry: { bundle: "/src/index.js", vendor: ["react", "react-dom"] }, output: { path: "public/build", filename: "js/[name].[chunkhash:8].js", chunkFilename: "js/[name].[chunkhash:8].js", publicPath: "/" }, }

module.exports = { entry: { //entry points of an application bundle: "/src/index.js", vendor: ["react", "react-dom"] }, output: { path: "public/build", filename: "js/[name].[chunkhash:8].js", chunkFilename: "js/[name].[chunkhash:8].js", publicPath: "/" }, }

module.exports = { entry: { bundle: "/src/index.js", vendor: ["react", "react-dom"] }, output: { // options related to how webpack emits results path: "public/build", filename: "js/[name].[chunkhash:8].js", chunkFilename: "js/[name].[chunkhash:8].js", publicPath: "/" }, }

Dynamic Imports Split code via inline function calls within modules. // HOF using dynamic imports with ContextModulePlugin const getChunk = chunkName => import( /* webpackMode: "lazy", webpackChunkName: "[request]" */ `./pages/${chunkName}` //ContextModulePlugin ); Checklist ☑ Configure webpack ➔ Use Dynamic Imports ▢ Configure routes to load async bundle

Checklist ☑ Configure webpack ☑ Use Dynamic Imports ➔ Configure routes to load async bundle Loading Async bundles on route visit with React-Router 4

react-chunkable yarn add react-chunkable OR npm install react-chunkable --save

import ComponentChunk from "react-chunkable"; const getChunk = chunkName => import(/* webpackMode: "lazy", webpackChunkName: "[request]" */ `./pages/${chunkName}`); const HomePage = props => ; class Routes extends PureComponent { render() { return ( } /> ); } }

import ComponentChunk from "react-chunkable"; const getChunk = chunkName => import(/* webpackMode: "lazy", webpackChunkName: "[request]" */ `./pages/${chunkName}`); const HomePage = props => ; class Routes extends PureComponent { render() { return ( } /> ); } }

import ComponentChunk from "react-chunkable"; const getChunk = chunkName => import(/* webpackMode: "lazy", webpackChunkName: "[request]" */ `./pages/${chunkName}`); const HomePage = props => ; class Routes extends PureComponent { render() { return ( } /> ); } }

import ComponentChunk from "react-chunkable"; const getChunk = chunkName => import(/* webpackMode: "lazy", webpackChunkName: "[request]" */ `./pages/${chunkName}`); const HomePage = props => ; class Routes extends PureComponent { render() { return ( } /> ); } }

Checklist ☑ Configure webpack ☑ Use Dynamic Imports ☑ Configure routes to load async bundle

kamleshchandnani/react-chunkable

bit.ly/rc-progressive-loading

Say @_kamlesh_ DM Open!