UmiJS 3.x 踩坑記錄

最近在作的一個新項目，結合umi 3.x + antd 4.x開發，在此總結並分享在項目中遇到的一些坑給掘友們。

1.顯示網頁源代碼中文亂碼

解決方案：從新安裝umi@3.2.14，或者更高的版本(github.com/umijs/umi/i…)

$ npm install umi@3.2.14 --save
複製代碼

2.約定式路由404頁面沒法顯示

// src/app.js
export function patchRoutes({ routes }) {
    routes[0].routes.push({
        component: require('@/pages/404').default,
    });
}
複製代碼

3.全局處理onError

// src/app.js
import { message } from 'antd';

message.config({
    top: 24,
    maxCount: 1,
});

export const dva = {
    config: {
        onError(err) {
            err.preventDefault();
            console.error(err.message);
        },
    },
};
複製代碼

4.動態修改title

import { Helmet } from 'react-helmet';

<Helmet>
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href={xxx} type="image/x-icon" />
    <script src={xxx} />
    <link rel="stylesheet" href={xxx} />
</Helmet>
複製代碼

5.性能優化

• 配置中開啓dynamicImport，打包後會按需加載(umijs.org/zh-CN/confi…)

// config/config.js
import { defineConfig } from 'umi';

export default defineConfig({
    dynamicImport: {
        loading: '@/components/PageLoading/index',
    },
})
複製代碼

• 配置splitChunks + chunk的方式作代碼分割

// config/config.js
import { defineConfig } from 'umi';

export default defineConfig({
    chunks: ['react', 'utils', 'charts', 'vendors', 'umi'],
    chainWebpack(config, { webpack }) {
        config.optimization.splitChunks({
            // chunks: 'all',
            // minSize: 30000,
            // minChunks: 3,
            // automaticNameDelimiter: '.',
            cacheGroups: {
                // 組件庫相關
                react: {
                  name: 'react',
                  chunks: 'all',
                  test: /[\\/]node_modules[\\/](react|react-dom|react-router|react-router-dom|moment|antd|@ant-design)[\\/]/,
                  priority: 12,
                },
                // 工具庫相關
                utils: {
                  name: 'utils',
                  chunks: 'all',
                  test: /[\\/]node_modules[\\/](lodash|ramda)[\\/]/,
                  priority: 11,
                },
                // 圖表庫相關
                charts: {
                  name: 'charts',
                  chunks: 'all',
                  test: /[\\/]node_modules[\\/](echarts|bizcharts|@antv)[\\/]/,
                  priority: 11,
                },
                vendors: {
                  name: 'vendors',
                  chunks: 'all',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                },
            },
        });
    }
})
複製代碼

• 配置externals + scripts + styles屬性將三方類庫經過cdn引入(www.jsdelivr.com/)

// config/config.js
import { defineConfig } from 'umi';

export default defineConfig({
  externals: {
      react: 'React',
      'react-dom': 'ReactDOM',
      lodash: '_',
      antd: 'antd',
  },
  scripts:
      process.env.NODE_ENV === 'development'
          ? [
                'https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.development.js',
                'https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.development.js',
                'https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.js',
                'https://cdn.jsdelivr.net/npm/antd@4.5.2/dist/antd.js',
            ]
          : [
                'https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js',
                'https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js',
                'https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js',
                'https://cdn.jsdelivr.net/npm/antd@4.5.2/dist/antd.min.js',
            ],
    styles:
        process.env.NODE_ENV === 'development'
            ? ['https://cdn.jsdelivr.net/npm/antd@4.5.2/dist/antd.css']
            : ['https://cdn.jsdelivr.net/npm/antd@4.5.2/dist/antd.min.css'],
})
複製代碼