This is a collection of officially packaged plugins with 13 commonly used advanced features.

$ yarn add umi-plugin-react --dev

Configured in .umirc.js:

export default {
  plugins: [
    ['umi-plugin-react', {
      dva: {
        immer: true,
      },
      antd: true,
      routes: {
        exclude: [/models\//],
      },
      polyfills: ['ie9'],
      locale: {},
      library: 'react',
      dynamicImport: {
        webpackChunkName: true,
        loadingComponent: './components/Loading.js',
      },
      dll: {
        exclude: [],
      },
      hardSource: true,
      pwa: true,
      hd: true,
      fastClick: true,
      title: 'default title',
    }],
  ],
};

All features are turned off by default and will be enabled if there is a true value.

• Type: Object

Based on umi-plugin-dva, see the details at Use with dva。

Configuration items includes:

• immer, Whether to enable dva-immer
• dynamicImport, Whether to enable dynamic import, options same as #dynamicImport, and if you configure it in #dynamicImport, the options items will be inherited into dva
• hmr, Whether to enable dva hmr

::: warning If there is a dva dependency in the project, the dependencies in the project are prioritized. :::

• Type: Boolean

Automatically configure babel-plugin-import to enable on-demand compilation of antd, antd-mobile and antd-pro, with built-in antd and antd-mobile dependencies, There is no need to manually install in the project.

::: warning If there is an ant or antd-mobile dependency in the project, the dependencies in the project are prioritized. :::

• Type: Object

based on umi-plugin-routes, used to modify routes in batches.

options include:

• exclude, type is Array(RegExp), used to ignore certain routes, such as using dva, usually need to ignore the models, components, services, etc.
• update, type is Function, for update routes.

• Type: Array(String)

Based on umi-plugin-polyfills, used to add polyfills.

Currently supports configuration of ['ie9'], ['ie10'] or ['ie11'] for quickly compatibility.

• Type Object

Based on umi-plugin-locale and react-intl, used to resolve internationalization.

options include:

• default: 'zh-CN', // default zh-CN
• baseNavigator: true, // default true, when it is true, will use navigator.language overwrite default
• antd: true, // use antd, default is true

• Type: String

It is possible to switch the underlying library to either preact or react.

• Type: Object

Implement routing-level code splitting, which specifies which level of on-demand loading is required.

options include:

• webpackChunkName, Whether to add a meaningful file name
• loadingComponent, Specify the component path at load time
• level, specifying the route level to code splitting

• Type: Object

Increase the second startup speed by webpack dll plugin.

options include:

• include
• exclude

• Type: Boolean

Open webpack cache with hard-source-webpack-plugin， 80% increase in speed of the second start. It is recommended to use non-windows computers. Due to the slowness of large file IO under Windows, it is up to you to decide whether to enable it.

• Type Object

Enable some PWA features including:

• Generate a manifest.json
• Generate a Service Worker on PRODUCTION mode

options include:

• manifestOptions Type: Object, includes following options:
  • srcPath path of manifest, Type: String, Default src/manifest.json
• workboxPluginMode Workbox mode, Type: String, Default GenerateSW(generate a brand new Service Worker); or InjectManifest(inject code to existed Service Worker)
• workboxOptions Workbox Config，some important options:
  • swSrc Type: String, Default src/manifest.json, only in InjectManifest mode
  • swDest Type: String, Defaults to service-worker.js or the same with basename in swSrc if provided
  • importWorkboxFrom Type: String，Workbox loads from Google CDN by default, you can choose to 'local' mode which will let Workbox loads from local copies

You can refer to Workbox for more API usages.

Here's a simple example:

// .umirc.js or config/config.js
export default {
  pwa: {
    manifestOptions: {
      srcPath: 'path/to/manifest.webmanifest')
    },
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      importWorkboxFrom: 'local',
      swSrc: 'path/to/service-worker.js'),
      swDest: 'my-dest-sw.js'
    }
  }
}

You can also listen to some CustomEvent when Service Worker has updated old contents in cache. It's the perfect time to display some message like "New content is available; please refresh.". For example, you can listen to sw.updated event in such UI component:

window.addEventListener('sw.updated', () => {
  // show message
});

You can also react to network environment changes, such as offline/online:

window.addEventListener('sw.offline', () => {
  // make some components gray
});

• Type Boolean

Turn on the HD solution.

• Type Boolean

Enable fastClick.

• Type String or Object

Enable title plugin for set HTML title:

options include:

• defaultTitle: 'default tile', // required, when option type is String, will use option as the default title
• format: '{parent}{separator}{current}', // default {parent}{separator}{current}, title format
• separator: ' - ', // default ' - '

When the title plugin is enabled you can configure the title in the route configuration or in the page component in pages folder.

For example:

// .umirc.js or config/config.js
export default {
  routes: [{
    path: '/testpage',
    component: './testpage',
    title: 'test page',
  }],
}

or

/**
 * title: test page
 */
export default () => {
  return <div>testpage</div>;
}