Package Exports

babel-plugin-async-import

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-async-import) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

babel-plugin-async-import

Platform-agnostic asynchronous imports

Overview

Generate code that can run on server and in browser
Full support for code splitting and SSR
Node 8+
See the v1 branch for Babel 6 support

import React, { Suspense } from 'react';

export default function LazyContainer({ name, ...props }) {
  const LazyComponent = React.lazy(() => import(`./pages/${name}`));
  return (
    <Suspense fallback="Loading...">
      <LazyComponent {...props} />
    </Suspense>
  );
}

Usage

babel.config.js

module.exports = {
  plugins: [
    // Default options
    ['async-import', {
      // browser: 'import(REQUEST)',
      // node: 'Promise.resolve(require(REQUEST))'
    }],

    // Common template
    ['async-import', {
      template: 'myCustomImport(REQUEST)'
    }],
  ]
};

Use BABEL_TARGET to choose the output template:

BABEL_TARGET=browser babel src --copy-files --out-dir dist

BABEL_TARGET=node babel src --copy-files --out-dir dist

Performance

Consider a simple application with the following structure:

App
 ├── Page1
 ├── Page2
 ├── Page3
 └── Page4

Bundling with webpack yields:

# static import
 main.dfdad3d5930fe00fd037.js       526 kB      0  [emitted]  [big]  main

# require.ensure
chunk.0.6440f6c153085827a48b.js    24.3 kB      0  [emitted]
   main.943ecc70fec31c6444f4.js     503 kB      1  [emitted]  [big]  main

# async import
chunk.0.9491e6c24e3b87d1d63f.js    12.9 kB      0  [emitted]
chunk.1.f37226ca0aefdcb8b991.js     3.7 kB      1  [emitted]
chunk.2.84348279875f5fba6e99.js    3.74 kB      2  [emitted]
chunk.3.c7cdc567dea9bd59569a.js    3.71 kB      3  [emitted]
   main.058200e44cf45d9723b4.js     503 kB      4  [emitted]  [big]  main