Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Cut it up

730 vues

Publié le

Varun Vachhar

JavaScript frameworks allow us to build innovative and delightful experiences for our users. A common approach adopted with these modern tools is to combine all required JavaScript into one large bundle. Therefore, causing the loading performance to suffer. Especially on older devices or devices with low memory and processing power.

An alternative approach is to split your code into various smaller chunks which you can then be loaded on demand — allowing you to reduce the load time drastically.

In this session, Varun will demonstrate how you can adopt the practice of code-splitting when building applications with frameworks such as React and Vue.

Learn how to use code-splitting to improve the loading performance of Javascript heavy applications.

Target Audience
Front-end developers who build JavaScript heavy applications

Assumed Audience Knowledge
Basic understanding of web development and some familiarity with frameworks such as React, Angular or Vue.


Five Things Audience Members Will Learn
What is code-splitting?
Different types of code-splitting
How to split a React or Vue application
How to “lazy-load” parts of the application
Removing duplicate code from chunksa

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Cut it up

  1. 1. Cut it Up Varun Vachhar Director, UI Architecture at Rangle.io ✂️
  2. 2. Cut it Up 2 Bundling What is code splitting? Splitting applications Code splitting strategies Optimizing lazy loading Outline 01 02 03 04 05
  3. 3. 01 02 03 04 05 Bundling Cut it Up 3
  4. 4. Cut it Up The process of compiling small pieces of code into something larger and more complex, such as a library or application. Bundling 4
  5. 5. Cut it Up Task Runners Bundling Used to automate tasks in your development workflow. You can use them to process, concatenate and minify assets of a certain type. 5
  6. 6. Cut it Up Used to bundle several modules into one or more optimized bundles for the browser. Most notable bundlers are Webpack, Parcel and Rollup. Bundlers Bundling 6
  7. 7. Everything is a Module! ● All files – CSS, HTML, SCSS, PNG, etc. ● ES2015 import statements ● require() statements ● @import statement in stylesheets ● Image url in a stylesheet or HTML Cut it Up Bundling 7
  8. 8. Cut it Up Less to Learn CLIs make it easy to create an application that works, right out of the box and generates optimized bundles which are ready to deploy. Bundling ❯ vue create my-project ❯ npx create-react-app my-app ❯ ng new my-project 8
  9. 9. Cut it Up Uniqlo Design System Webpack Bundling Loaders 🖨🖨 Transform files into modules Plugins 🔌 Customize or enhance the webpack build process in a variety of ways. module.exports = { entry: '📄 Entry', output: '📦 Output', module: { rules: ['🖨🖨 Loaders'], }, plugins: ['🔌 Plugins'], };
  10. 10. 01 02 03 04 05 Cut it Up 10 What Is Code Splitting?
  11. 11. * The need for mobile speed: How mobile latency impacts publisher revenue 53%* Of mobile site visits were abandoned if a page took longer than 3 seconds to load. Load Times 12
  12. 12. Instead of shipping all the JavaScript to the user on first load, split your bundle into multiple chunks and only send what is necessary at the very beginning. Cut it Up 13 Code Splitting
  13. 13. Cut it Up 14 Code Splitting HTML Main JS Chunk CSS Lazy-load chunks as the user navigates chunk #1 chunk #2 chunk #3 interactive
  14. 14. Splitting Applications 01 02 03 04 05 Cut it Up 15
  15. 15. Cut it Up 16 import math from './math'; document.getElementById('#calculate') .addEventListener('click', e => { e.preventDefault(); math.calculateResult(); }); Static Imports main.js
  16. 16. Cut it Up 17 Dynamic Imports document.getElementById('#calculate') .addEventListener('click', e => { e.preventDefault(); import('./math').then(math => { math.calculateResult(); }); }); main.js math.js
  17. 17. When Webpack comes across the import() syntax, it automatically starts code-splitting your app. Cut it Up Code Splitting 18
  18. 18. Cut it Up 19 Static Components — React import Photos from './Photos'; const Album = ( <div> <Photos /> </div> );
  19. 19. Cut it Up 20 Async Components — React const Photos = React.lazy(() => import('./Photos')); const Album = ( <div> <Photos /> </div> );
  20. 20. Cut it Up 21 Async Components — Vue <template> <div> <album></album> </div> </template> <script> export default { components: { album: () => import('./Album') } }; </script>
  21. 21. Code Splitting Strategies 01 02 03 04 05 Cut it Up 22
  22. 22. Cut it Up Code splitting requires a bit of extra effort as you have to decide what and where to split. Bundling 23
  23. 23. Cut it Up Great option to get started with code- splitting. Break the application into chunks per route, and then load that chunk when the user navigates to that route. Route Based Code Splitting Strategies 24 about.js blog.jsmain.js home.js
  24. 24. const Home = React.lazy(() => import('./Home')); const About = React.lazy(() => import('./About')); const Blog = React.lazy(() => import('./Blog)); 25 Route Based Code-Splitting — React const App = () => ( <Router> <React.Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/blog" component={Blog}/> </Switch> </React.Suspense> </Router> );
  25. 25. 26 const Home = () => ({ component: import('./Home'), loading: Loader }); const About = () => ({ component: import('./About'), loading: Loader }); const Blog = () => ({ component: import('./Blog), loading: Loader }); const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/blog, component: Blog }, ], }); Route Based Code-Splitting — Vue
  26. 26. Cut it Up Chunk Dependencies 28
  27. 27. Cut it Up Automatically identifies modules which should be split and avoids duplicated dependencies across chunks. Split Chunks Plugin Code Splitting Strategies 29 optimization: { splitChunks: { chunks: 'all', name: false, } }
  28. 28. Chunks are code which is broken apart from main bundle into their own files. ● Vendor — dependency code coming from node_modules ● Common — code which is shared between different chunks ● Async — code which can be lazy-loaded Cut it Up Chunks 30
  29. 29. Cut it Up Split components that load content on demand or are hidden by default — Tabs, Modals and Alerts On-demand Content Code Splitting Strategies 31
  30. 30. Cut it Up Multi-step features such as checkout flows which continue based clicks should be split per step. Isolate Process Flows Code Splitting Strategies 32
  31. 31. Optimizing Lazy Loading 01 02 03 04 05 Cut it Up 33
  32. 32. Cut it Up A browser mechanism that prefetches documents that the user might visit in the near future Prefetch Optimizing Lazy Loading 34
  33. 33. Cut it Up Detects visibility of an element Intersection Observer Optimizing Lazy Loading 35
  34. 34. from Faster Page-Loads by Chidume Nnamdi Optimistically & Idly Prefetch Resources An IntersectionObserver is registered for all links Waits until the browser is idle Prefetches URLs to the links Optimizing Lazy Loading 36
  35. 35. Cut it Up Or, use Quicklink github.com/GoogleChromeLabs/quicklink Optimizing Lazy Loading 37
  36. 36. Cut it Up 01 Your app was likely bootstrapped using a CLI and using webpack for bundling. Summary 38 02 Do enable route based code-splitting and consider splitting on-demand components. 03 Leverage the Split Chunks Plugin to avoid duplication of code across chunks. 04 Optimistically and idly prefetch the split chunks.
  37. 37. Thank you! varun.ca @winkerVSbecks
  38. 38. Cut it Up Rangle.io