Frontend Performance Optimization with Code Splitting using React.Lazy & Suspense 🔥

• loadable-components

  12 7,536 5.4 JavaScript

  The recommended Code Splitting library for React ✂️✨

// Components.js export const Component = /* ... */; export const UnusedComponent = /* ... */; // Component.js export { Component as default } from "./Components.js"; As both React.lazy and Suspense are not available for rendering on the server yet now, it is recommended to use https://github.com/gregberge/loadable-components for code-splitting in a server-rendered app (SSR). React.lazy is helpful for rendering dynamic import as a regular component in client-rendered app (CSR). Magic Comment at import() import( /* webpackChunkName: "test", webpackPrefetch: true */ "LoginModal" ) // or import( /* webpackChunkName: "test" */ /* webpackPrefetch: true */ "LoginModal" ) // spacing optional "webpackChunkName" : Using this magic comment we can set name for the js chunk that is loaded on demand.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project