Progressive Loading

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