Just landed my PR addings docs about code splitting to the @reactjs docs

  • If you’re using Create React App, Next.js, Gatsby, or a similar tool, you will have a Webpack setup out of the box to bundle your app.
  • You need to keep an eye on the code you are including in your bundle so that you don’t accidentally make it so large that your app takes a long time to load.
  • While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.
  • For that you will need Loadable wraps dynamic imports in a nice, React-friendly API for introducing code splitting into your app at a given component.
  • Here’s an example of how to setup route-based code splitting into your app using libraries like React Router and React Loadable.

Most React apps will have their files “bundled” using tools like
Webpack or Browserify.
Bundling is the process of following imported files and merging them into a
single file: a “bundle”. This bundle can then be included on a webpage to load
an entire app at once.
Continue reading “Just landed my PR addings docs about code splitting to the @reactjs docs”

BREAKING: Next.js 3.0 is out via @zeithq @rauchg @arunoda #javascript #framework #reactjs

  • Next.js is a zero-configuration, single-command toolchain for React apps, with built-in server-rendering, code-splitting and more.
  • The prolific Next.js community has already come up with some static blog generators for you to check out:

    With dynamic imports, our codebase gets split into a set of chunks that can later be loaded dynamically.

  • The developer gets full control to load code over time, depending on user interaction or the data itself.
  • Dynamic components can load React code on-demand, but the most interesting feature is that if they are included in the initial rendering, server-rendering still works!
  • Moving forward, you’ll be able to load code as a function of the data the user is presented with.

Next.js 3.0 comes with vastly improved HMR, dynamic imports, static exports and better serverless support!
Continue reading “BREAKING: Next.js 3.0 is out via @zeithq @rauchg @arunoda #javascript #framework #reactjs”

ZEIT – Next 3.0 Preview

  • On the heels of our announcement of free static deployments earlier today , we are excited to introduce a beta release of the upcoming Next.js 3.0, featuring , dynamic components and various bugfixes.
  • It will seamlessly build your Next.js app as a standalone static website .
  • The exported app supports almost every feature of Next.js , including dynamic URLs, prefetching, preloading and the new dynamic imports.
  • Next.js 3.0 comes with TC39 dynamic import support.
  • Next.js supports server side rendering for dynamic imports.

Next 3.0 features Static Exports with one command and Dynamic Imports
Continue reading “ZEIT – Next 3.0 Preview”