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

Transpiles to code that can run on server and in browser
Full support for code splitting and SSR
Node 4+

const getPageContainer = memoize(async name => await (
  await import(`./pages/${name}`)
).default);

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

Usage

.babelrc

{
  plugins: ['async-import']
}