babel-plugin-smart-webpack-import

Smart Webpack Import

Smart Webpack Import has the goal to improve the developer experience when working with so-called dynamic import() statements.

Features

• Automatic chunk names for all imports.
• Respects existing chunk names and keeps them.
• Keeps other magic comments from Webpack in-tact while adding our ones.
• Uses hashes on requester to prevent collisions for identically named imports.
• Works together with Loadable Components and (other code-splitting SSR solutions).

Installation

npm i -D babel-plugin-smart-webpack-import

Usage

"plugins": [
  "babel-plugin-smart-webpack-import"
]

Use it together with your favorite code splitting library:

"plugins": [
  "babel-plugin-smart-webpack-import",
  "@loadable/babel-plugin"
]

Hash suffixes can be disabled by passing hashes: false option:

"plugins": [
  ["babel-plugin-smart-webpack-import", { hashes: false } ]
]

In this case it is developer's responsibility to ensure that there are no collisions between identically named imports.

Example

Basic

import('./HelloView')
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
import(
/*webpackChunkName:'HelloView-zy9ks'*/
'./HelloView');

Keeps Prefetch

import(/* webpackPrefetch: true */ './HelloView')
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
import(
/*webpackPrefetch:true,webpackChunkName:'HelloView-zy9ks'*/
'./HelloView');

Shortens Paths

import('./views/admin/SettingsView')
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
import(
/*webpackChunkName:'SettingsView-ijYnC'*/
'./views/admin/SettingsView');

Supports query-based imports

import(`./views/${name}`)
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
import(
/*webpackChunkName:'views-[request]-njvjH'*/
`./views/${name}`);

Shortens query-based imports

import(`./app/views/${name}`)
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
import(
/*webpackChunkName:'views-[request]-xkLem'*/
`./views/${name}`);

Same as Basic, but with { hashes: false } option

import('./HelloView')
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
import(
/*webpackChunkName:'HelloView'*/
'./HelloView');

Comments

To make this work it's important that your Babel setup keeps comments in-tact as the information required is carryied over to Webpack via so-called magic comments.

This module exports an additional helper function called shouldPrintComment to make this work more easily. It keeps Webpack's Magic Comments and "Pure" markers for Uglify compression. You can pass it over to your Babel config like this:

import { shouldPrintComment } from "babel-plugin-smart-webpack-imports"
 
export default {
  presets: [...],
  plugins: [...],
  shouldPrintComment
}

Please not that this only works in a JS environment e.g. an exported Rollup or Webpack config. A plain .babelrc is not capable of declaring functions or even importing code. With Babel v7 your can use a .babelrc.js file as well.

License

Apache License Version 2.0, January 2004

Copyright

Copyright 2018-2020
Sebastian Software GmbH