Progressive Loading

Progressive Loading

5fef485de4c666c0cf5a7c24bcdd289e?s=128

Kamlesh Chandnani

October 23, 2017
Tweet

Transcript

  1. Dobrý deň, bratia v Bratislave Hello Folks!

  2. Kamlesh Chandnani Frontend Engineer : Mobisy Technologies, Bangalore : @_kamlesh_

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

  4. Why?

  5. None
  6. Giant Pizza = Main App Bundle Without Code Splitting

  7. Pizza Slicer = Code Splitting

  8. Pizza Slice = Code Splitted Bundle

  9. Checklist ☑ Configure webpack ☑ Use Dynamic Imports ☑ Configure

    routes to load async bundle
  10. 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
  11. 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" }) ];
  12. 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" }) ];
  13. 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 })];
  14. Fact: Sequence of “CommonsChunkPlugin” matters

  15. 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: "/" }, }
  16. 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: "/" }, }
  17. 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: "/" }, }
  18. 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
  19. Checklist ☑ Configure webpack ☑ Use Dynamic Imports ➔ Configure

    routes to load async bundle Loading Async bundles on route visit with React-Router 4
  20. react-chunkable yarn add react-chunkable OR npm install react-chunkable --save

  21. import ComponentChunk from "react-chunkable"; const getChunk = chunkName => import(/*

    webpackMode: "lazy", webpackChunkName: "[request]" */ `./pages/${chunkName}`); const HomePage = props => <ComponentChunk componentProps={props} loadChunk={getChunk("home")} />; class Routes extends PureComponent { render() { return ( <Router> <Route exact={true} path="/" component={props => <HomePage {...props} />} /> </Router> ); } }
  22. import ComponentChunk from "react-chunkable"; const getChunk = chunkName => import(/*

    webpackMode: "lazy", webpackChunkName: "[request]" */ `./pages/${chunkName}`); const HomePage = props => <ComponentChunk componentProps={props} loadChunk={getChunk("home")} />; class Routes extends PureComponent { render() { return ( <Router> <Route exact={true} path="/" component={props => <HomePage {...props} />} /> </Router> ); } }
  23. import ComponentChunk from "react-chunkable"; const getChunk = chunkName => import(/*

    webpackMode: "lazy", webpackChunkName: "[request]" */ `./pages/${chunkName}`); const HomePage = props => <ComponentChunk componentProps={props} loadChunk={getChunk("home")} />; class Routes extends PureComponent { render() { return ( <Router> <Route exact={true} path="/" component={props => <HomePage {...props} />} /> </Router> ); } }
  24. import ComponentChunk from "react-chunkable"; const getChunk = chunkName => import(/*

    webpackMode: "lazy", webpackChunkName: "[request]" */ `./pages/${chunkName}`); const HomePage = props => <ComponentChunk componentProps={props} loadChunk={getChunk("home")} // name of the chunk which will be loaded asynchronously/>; class Routes extends PureComponent { render() { return ( <Router> <Route exact={true} path="/" component={props => <HomePage {...props} />} /> </Router> ); } }
  25. Checklist ☑ Configure webpack ☑ Use Dynamic Imports ☑ Configure

    routes to load async bundle
  26. kamleshchandnani/react-chunkable

  27. bit.ly/rc-progressive-loading

  28. Say @_kamlesh_ DM Open!