feat: Lazy load

package.json

@@ -11,6 +11,7 @@
     "commit": "cross-env git-cz",
     "dev": "cross-env NODE_ENV=development webpack serve",
     "build": "cross-env NODE_ENV=production webpack",
+    "build-with-bundle-analyzer": "cross-env NODE_ENV=production enableBundleAnalyzer=true webpack",
     "preview": "npx serve -s dist",
     "clean": "rm dist",
     "lint:file": "cross-env eslint . --ext .js,.jsx,.ts,.tsx --fix",

src/app/ui/app/app.tsx

@@ -1,25 +1,74 @@
-import { useState, useCallback } from 'react';
+import { lazy, Suspense, useState, useCallback } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 import { hot } from 'react-hot-loader/root';
 import { Router, Route, Switch } from 'react-router-dom';
 import { useGate } from 'effector-react';
 import { QueryParamProvider } from 'use-query-params';
-import ArticlePage from '@/pages/article';
-import EditorPage from '@/pages/editor';
-import HomePage from '@/pages/home';
-import LoginPage from '@/pages/login';
-import NoMatchPage from '@/pages/no-match';
-import ProfilePage from '@/pages/profile';
-import RegistrationPage from '@/pages/registration';
-import SettingsPage from '@/pages/settings';
 import { history, ROUTES, PrivateRoute } from '@/shared/router';
-import { Page, Button, Pre } from '@/shared/ui';
+import { Page, Button, Pre, Spinner } from '@/shared/ui';
 import * as model from '../../model';
 import { Layout } from '../layout';
 
 import './app.css';
 
+const LoginPage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "login" */
+      '@/pages/login'
+    ),
+);
+const RegistrationPage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "registration" */
+      '@/pages/registration'
+    ),
+);
+const HomePage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "home" */
+      '@/pages/home'
+    ),
+);
+const EditorPage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "editor" */
+      '@/pages/editor'
+    ),
+);
+const SettingsPage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "settings" */
+      '@/pages/settings'
+    ),
+);
+const ProfilePage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "profile" */
+      '@/pages/profile'
+    ),
+);
+const ArticlePage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "article" */
+      '@/pages/article'
+    ),
+);
+const NoMatchPage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "no-match" */
+      '@/pages/no-match'
+    ),
+);
+
 export const App = hot(() => {
   useGate(model.Gate);
 
@@ -96,27 +145,29 @@ function Routes() {
       resetKeys={[state]}
       onReset={forceUpdate}
     >
-      <Switch>
-        {routes.map((route) =>
-          route.isPrivate ? (
-            <PrivateRoute
-              exact={route.exact}
-              key={route.path.toString()}
-              path={route.path}
-            >
-              <route.component />
-            </PrivateRoute>
-          ) : (
-            <Route
-              exact={route.exact}
-              key={route.path.toString()}
-              path={route.path}
-            >
-              <route.component />
-            </Route>
-          ),
-        )}
-      </Switch>
+      <Suspense fallback={<Spinner />}>
+        <Switch>
+          {routes.map((route) =>
+            route.isPrivate ? (
+              <PrivateRoute
+                exact={route.exact}
+                key={route.path.toString()}
+                path={route.path}
+              >
+                <route.component />
+              </PrivateRoute>
+            ) : (
+              <Route
+                exact={route.exact}
+                key={route.path.toString()}
+                path={route.path}
+              >
+                <route.component />
+              </Route>
+            ),
+          )}
+        </Switch>
+      </Suspense>
     </ErrorBoundary>
   );
 }

src/pages/article/ui/content.tsx

@@ -1,9 +1,33 @@
-import Markdown from 'markdown-to-jsx';
+// import Markdown from 'markdown-to-jsx';
 import { Row } from '@/shared/ui';
 import { selectors } from '../model';
 import { Tags } from './tags';
 
+let Markdown = null;
+let startLoad = false;
+
+function lazyLoadMarkdownToJSX() {
+  if (startLoad) {
+    return;
+  }
+  startLoad = true;
+  import(
+    /* webpackChunkName: "markdown-to-jsx" */
+    'markdown-to-jsx'
+  )
+    .then((module) => {
+      Markdown = module.default;
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}
+
 export const Content = () => {
+  lazyLoadMarkdownToJSX();
+  if (!Markdown) {
+    return null;
+  }
   const { body } = selectors.useArticle();
 
   return (

webpack/common.config.js

@@ -15,8 +15,11 @@ module.exports = {
   plugins: [
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
+      // analyzerMode: 'json',
+      // analyzerMode: 'server',
       defaultSizes: 'gzip',
       openAnalyzer: false,
+      disabled: !!process.env.enableBundleAnalyzer,
     }),
     new HtmlWebpackPlugin({
       template: 'index.html',

webpack/production.config.js

@@ -11,7 +11,7 @@ module.exports = {
   mode: 'production',
   output: {
     path: DIST,
-    publicPath: '',
+    publicPath: 'http://localhost:3000/',
     filename: '[name].[contenthash].js',
   },
   optimization: {
@@ -24,7 +24,8 @@ module.exports = {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
-          chunks: 'all',
+          // chunks: 'all',    // 指定vendors区块包含同步、异步加载的2类模块。
+          chunks: 'initial', // 指定vendors区块只包含同步加载的模块。
         },
       },
     },