diff --git a/test/load/__snapshots__/routes.test.js.snap b/test/load/__snapshots__/routes.test.js.snap
index d9e6869438..f03e3e2ec6 100644
--- a/test/load/__snapshots__/routes.test.js.snap
+++ b/test/load/__snapshots__/routes.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`genRoutesConfig website with no docs/pages 1`] = `
 "import React from 'react';
+import Loadable from 'react-loadable';
+import Loading from '@theme/Loading';
 import Docs from '@theme/Docs';
 import NotFound from '@theme/NotFound';
-
-
 const routes = [,,
   {
     path: '*',
@@ -18,39 +18,46 @@ export default routes;
 
 exports[`genRoutesConfig website with only docs 1`] = `
 "import React from 'react';
+import Loadable from 'react-loadable';
+import Loading from '@theme/Loading';
 import Docs from '@theme/Docs';
 import NotFound from '@theme/NotFound';
-
-import MDHello from '@docs/hello.md';
-import MDFooBar from '@docs/foo/bar.md';
-import MDFooBaz from '@docs/foo/baz.md';
 const routes = [
   {
     path: \\"/hello\\",
     exact: true,
-    component: (props) => (
-      <Docs {...props}>
-        <MDHello />
-      </Docs>
-    )
+    component: Loadable({
+      loader: () => import('@docs/hello.md'),
+      loading: Loading,
+      render(loaded, props) {
+        let Content = loaded.default;
+        return <Docs {...props}><Content /></Docs>;
+      }
+    })
   },
   {
     path: \\"/foo/bar\\",
     exact: true,
-    component: (props) => (
-      <Docs {...props}>
-        <MDFooBar />
-      </Docs>
-    )
+    component: Loadable({
+      loader: () => import('@docs/foo/bar.md'),
+      loading: Loading,
+      render(loaded, props) {
+        let Content = loaded.default;
+        return <Docs {...props}><Content /></Docs>;
+      }
+    })
   },
   {
     path: \\"/foo/baz\\",
     exact: true,
-    component: (props) => (
-      <Docs {...props}>
-        <MDFooBaz />
-      </Docs>
-    )
+    component: Loadable({
+      loader: () => import('@docs/foo/baz.md'),
+      loading: Loading,
+      render(loaded, props) {
+        let Content = loaded.default;
+        return <Docs {...props}><Content /></Docs>;
+      }
+    })
   },,
   {
     path: '*',
@@ -63,33 +70,42 @@ export default routes;
 
 exports[`genRoutesConfig website with only pages 1`] = `
 "import React from 'react';
+import Loadable from 'react-loadable';
+import Loading from '@theme/Loading';
 import Docs from '@theme/Docs';
 import NotFound from '@theme/NotFound';
-import JSFoo from '@pages/foo.js';
-import JSIndex from '@pages/index.js';
-import JSBarBaz from '@pages/bar/baz.js';
-import JSFooIndex from '@pages/foo/index.js';
-
 const routes = [,
   {
     path: \\"/foo\\",
     exact: true,
-    component: JSFoo
+    component: Loadable({
+      loader: () => import('@pages/foo.js'),
+      loading: Loading
+    })
   },
   {
     path: \\"/\\",
     exact: true,
-    component: JSIndex
+    component: Loadable({
+      loader: () => import('@pages/index.js'),
+      loading: Loading
+    })
   },
   {
     path: \\"/bar/baz\\",
     exact: true,
-    component: JSBarBaz
+    component: Loadable({
+      loader: () => import('@pages/bar/baz.js'),
+      loading: Loading
+    })
   },
   {
     path: \\"/foo/\\",
     exact: true,
-    component: JSFooIndex
+    component: Loadable({
+      loader: () => import('@pages/foo/index.js'),
+      loading: Loading
+    })
   },
   {
     path: '*',
@@ -102,62 +118,78 @@ export default routes;
 
 exports[`genRoutesConfig website with pages and docs 1`] = `
 "import React from 'react';
+import Loadable from 'react-loadable';
+import Loading from '@theme/Loading';
 import Docs from '@theme/Docs';
 import NotFound from '@theme/NotFound';
-import JSFoo from '@pages/foo.js';
-import JSIndex from '@pages/index.js';
-import JSBarBaz from '@pages/bar/baz.js';
-import JSFooIndex from '@pages/foo/index.js';
-import MDHello from '@docs/hello.md';
-import MDFooBaz from '@docs/foo/baz.md';
-import MDFooBar from '@docs/foo/bar.md';
 const routes = [
   {
     path: \\"/hello\\",
     exact: true,
-    component: (props) => (
-      <Docs {...props}>
-        <MDHello />
-      </Docs>
-    )
-  },
-  {
-    path: \\"/foo/baz\\",
-    exact: true,
-    component: (props) => (
-      <Docs {...props}>
-        <MDFooBaz />
-      </Docs>
-    )
+    component: Loadable({
+      loader: () => import('@docs/hello.md'),
+      loading: Loading,
+      render(loaded, props) {
+        let Content = loaded.default;
+        return <Docs {...props}><Content /></Docs>;
+      }
+    })
   },
   {
     path: \\"/foo/bar\\",
     exact: true,
-    component: (props) => (
-      <Docs {...props}>
-        <MDFooBar />
-      </Docs>
-    )
+    component: Loadable({
+      loader: () => import('@docs/foo/bar.md'),
+      loading: Loading,
+      render(loaded, props) {
+        let Content = loaded.default;
+        return <Docs {...props}><Content /></Docs>;
+      }
+    })
+  },
+  {
+    path: \\"/foo/baz\\",
+    exact: true,
+    component: Loadable({
+      loader: () => import('@docs/foo/baz.md'),
+      loading: Loading,
+      render(loaded, props) {
+        let Content = loaded.default;
+        return <Docs {...props}><Content /></Docs>;
+      }
+    })
   },
   {
     path: \\"/foo\\",
     exact: true,
-    component: JSFoo
+    component: Loadable({
+      loader: () => import('@pages/foo.js'),
+      loading: Loading
+    })
   },
   {
     path: \\"/\\",
     exact: true,
-    component: JSIndex
+    component: Loadable({
+      loader: () => import('@pages/index.js'),
+      loading: Loading
+    })
   },
   {
     path: \\"/bar/baz\\",
     exact: true,
-    component: JSBarBaz
+    component: Loadable({
+      loader: () => import('@pages/bar/baz.js'),
+      loading: Loading
+    })
   },
   {
     path: \\"/foo/\\",
     exact: true,
-    component: JSFooIndex
+    component: Loadable({
+      loader: () => import('@pages/foo/index.js'),
+      loading: Loading
+    })
   },
   {
     path: '*',
diff --git a/test/webpack/dev.test.js b/test/webpack/client.test.js
similarity index 74%
rename from test/webpack/dev.test.js
rename to test/webpack/client.test.js
index 23397124de..2f22a3ffd0 100644
--- a/test/webpack/dev.test.js
+++ b/test/webpack/client.test.js
@@ -1,4 +1,4 @@
-import createDevConfig from '@lib/webpack/dev';
+import createClientConfig from '@lib/webpack/client';
 import {validate} from 'webpack';
 import loadSetup from '../loadSetup';
 
@@ -6,7 +6,7 @@ describe('webpack dev config', () => {
   test('simple', async () => {
     console.log = jest.fn();
     const props = await loadSetup('simple');
-    const config = createDevConfig(props).toConfig();
+    const config = createClientConfig(props).toConfig();
     const errors = validate(config);
     expect(errors.length).toBe(0);
   });
@@ -14,7 +14,7 @@ describe('webpack dev config', () => {
   test('custom', async () => {
     console.log = jest.fn();
     const props = await loadSetup('custom');
-    const config = createDevConfig(props).toConfig();
+    const config = createClientConfig(props).toConfig();
     const errors = validate(config);
     expect(errors.length).toBe(0);
   });
diff --git a/test/webpack/prod.test.js b/test/webpack/server.test.js
similarity index 74%
rename from test/webpack/prod.test.js
rename to test/webpack/server.test.js
index 019d1a0404..9e4abf7b9b 100644
--- a/test/webpack/prod.test.js
+++ b/test/webpack/server.test.js
@@ -1,4 +1,4 @@
-import createProdConfig from '@lib/webpack/prod';
+import createServerConfig from '@lib/webpack/server';
 import {validate} from 'webpack';
 import loadSetup from '../loadSetup';
 
@@ -6,7 +6,7 @@ describe('webpack production config', () => {
   test('simple', async () => {
     console.log = jest.fn();
     const props = await loadSetup('simple');
-    const config = createProdConfig(props).toConfig();
+    const config = createServerConfig(props).toConfig();
     const errors = validate(config);
     expect(errors.length).toBe(0);
   });
@@ -14,7 +14,7 @@ describe('webpack production config', () => {
   test('custom', async () => {
     console.log = jest.fn();
     const props = await loadSetup('custom');
-    const config = createProdConfig(props).toConfig();
+    const config = createServerConfig(props).toConfig();
     const errors = validate(config);
     expect(errors.length).toBe(0);
   });