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'],
})