*suspense-loader.md

suspense-loader

Installation (sorry)

npm i THIS_URL

Usage

import Burger from 'suspense-loader!./burger';

const Sidebar = (props) => (
  <React.Suspense fallback={<span>loading...</span>}>
    <Burger {...props} />
  </React.Suspense>
);

Automatic Route-based Code Splitting

// webpack.config.js
module: {
  rules: [
    {
      test: /src\/routes\/[^/](\/index)?\.[jt]sx?$/,
      loader: 'suspense-loader'
    }
  ]
}

package.json

{
  "name": "suspense-loader",
  "version": "0.1.0",
  "main": "suspense-loader.js",
  "dependencies": {
    "loader-utils": "*"
  }
}

suspense-loader.js

const loaderUtils = require('loader-utils');

module.exports = function () {};
module.exports.pitch = function (remainingRequest) {
  this.cacheable && this.cacheable();
  const query = loaderUtils.getOptions(this) || {};
  const name = typeof query.name=='function' ? query.name(this.resourcePath) : query.name;
  const chunkName = name ? ` /* webpackChunkName: ${JSON.stringify(name)} */` : '';
  return `
    import React from 'react';
    export default React.lazy(
      () => import(${loaderUtils.stringifyRequest(this, "!!" + remainingRequest)}${chunkName})
    );
  `;
};