Umijs项目优化

看陌生的风景

已于 2023-10-30 17:20:23 修改

阅读量1.2k

点赞数 1

分类专栏： React 文章标签： react javascript react.js npm reactjs 前端框架 webpack

于 2023-10-30 17:16:45 首次发布

本文链接：https://blog.youkuaiyun.com/Richardjgp/article/details/134123399

版权

React 专栏收录该内容

13 篇文章

订阅专栏

首先通过npm run analyze 查看打包后的文件进行观察，哪些包的体积大，然后分解开
在这里插入图片描述
体积较大的文件:echarts、wangeditor、antd、moment.js

package.json 文件配置
在这里插入图片描述
.umirc.ts配置文件

1. 分包配置

通过 webpack-chain 的 API 修改 webpack 配置。

chunks: process.env.NODE_ENV === 'production' ? ['echarts', 'antdesigns', 'vendors', 'commons', 'umi'] : ['umi'],
  chainWebpack: function (config: any) {
        if (process.env.NODE_ENV === 'production') {
            config.merge({
                optimization: {
                    minimize: true,
                    splitChunks: {
                        chunks: 'all', //async异步代码分割 initial同步代码分割 all同步异步分割都开启
                        automaticNameDelimiter: '.',
                        name: true,	// 缓存组里面的filename生效，覆盖默认命名
                        minSize: 30000, // 引入的文件大于30kb才进行分割
                        //maxSize: 50000, // 50kb，尝试将大于50kb的文件拆分成n个50kb的文件
                        minChunks: 1, // 模块至少使用次数
                        // maxAsyncRequests: 5,    // 同时加载的模块数量最多是5个，只分割出同时引入的前5个文件
                        // maxInitialRequests: 3,  // 首页加载的时候引入的文件最多3个           
                        cacheGroups: {
                            echarts: {
                                name: 'echarts',
                                chunks: 'all',
                                test: /[\\/]node_modules[\\/](echarts)/,
                                priority: 10,
                                enforce: true,
                            },
                            antdesigns: {
                                name: 'antdesigns',
                                chunks: 'all',
                                test: /[\\/]node_modules[\\/](@antv|antd|@ant-design)/,
                                priority: 10,
                            },
                            vendors: {
                                name: 'vendors',
                                chunks: 'all',
                                test: /[\\/]node_modules[\\/](lodash-es|moment|react|dva)/,
                                priority: 10,
                            },
                            commons: {
                                name: 'commons',
                                chunks: 'all',
                                // minChunks: 2,
                                priority: 1,
                                enforce: true,
                            },
                        },
                    },
                },
            })
         
       
    },

2. Gzip压缩

 chainWebpack: function (config: any) {
 //gzip压缩
            config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
                {
                    test: /.(js|html|css)$/i, //匹配文件名
                    threshold: 10240, //对超过10k的数据压缩
                    deleteOriginalAssets: false, //不删除源文件
                },
            ])
            }

3. 组件懒加载

需要开启mfsu,umi 版本 “umi”: “^3.5.41”,

  	  mfsu: {},
     webpack5: {},
     dynamicImport: {
         // @ 默认指到 src 目录
         loading: '@/pages/Loading',
     },

4. moment.js 语言包剔除

  chainWebpack: function (config: any) {
        config.plugin('moment-locale').use(require('webpack').ContextReplacementPlugin, [/moment[\/\\]locale$/, /en|zh-cn/])
    },