Progressive Loading

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. Why?
   

   View Slide

5. View Slide

6. Giant Pizza
   =
   Main App Bundle
   Without Code
   Splitting
   

   View Slide

7. Pizza Slicer
   =
   Code Splitting
   

   View Slide

8. Pizza Slice
   =
   Code Splitted
   Bundle
   

   View Slide

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

   View Slide

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
    

    View Slide

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"
    })
    ];
    

    View Slide

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"
    })
    ];
    

    View Slide

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 })];
    

    View Slide

14. Fact:
    Sequence of “CommonsChunkPlugin” matters
    

    View Slide

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: "/"
    },
    }
    

    View Slide

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: "/"
    },
    }
    

    View Slide

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: "/"
    },
    }
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. import ComponentChunk from "react-chunkable";
    const getChunk = chunkName =>
    import(/* webpackMode: "lazy", webpackChunkName: "[request]" */
    `./pages/${chunkName}`);
    const HomePage = props => loadChunk={getChunk("home")} // name of the chunk which will be loaded asynchronously/>;
    class Routes extends PureComponent {
    render() {
    return (
    
    } />
    
    );
    }
    }
    

    View Slide

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

    View Slide

26. kamleshchandnani/react-chunkable
    

    View Slide

27. bit.ly/rc-progressive-loading
    

    View Slide

28. Say
    @_kamlesh_
    DM Open!
    

    View Slide