Umijs项目优化

news2024/9/25 13:18:46

首先通过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/])
    },

5.lodash替换方案lodash-es


“lodash-es”: “^4.17.21”,

调整后
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1151824.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

水果音乐编辑软件 flstudio_mac_21.2.0.3405中文破解版

flstudio_mac_21.2.0.3405中文破解版是Mac系统中的一款水果音乐编辑软件,提供多种插件,包括采样器、合成器和效果器,可编辑不同风格的音乐作品,Pattern/Song双模式,可兼容第三方插件和音效包,为您的创意插上…

.jnlp打开方式

首先配置电脑的java环境。 百度搜索jre下载,会有很多结果,一般选择官网进行下载。 下载正确的jre版本。 我的电脑是windows 64位,根据你自己电脑的情况选择版本进行下载。不懂自己电脑是多少位的可以看下一步。 查看电脑是64位还是32…

halcon roberts、 prewitt_amp、 sobel_amp、 edges_image、 laplace_of_gauss 对比

原图 灰度: roberts 算子: prewitt算子 sobel 算子 canny算子 拉普拉斯 代码: read_image (Image, C:/Users/alber/Desktop/opencv_images/canny.png) rgb1_to_gray (Image, GrayImage)* 测试 roberts 算子 roberts (GrayImage, ImageRoberts…

使用自动编码器进行半监督异常检测

使用自动编码器进行半监督异常检测 前言前提条件相关介绍Semi-supervised Anomaly Detection using AutoEncoders项目结构训练模型测试模型 参考 前言 由于本人水平有限,难免出现错漏,敬请批评改正。更多精彩内容,可点击进入YOLO系列专栏、自…

【NI-DAQmx入门】数字IO基础知识

1.漏端和源端数字IO的区别 漏端和源端是用于定义负载中直流电流控制的术语,分别表示所用到的数字输入和输出的类型。 漏端的数字I / O(输入/输出)提供与负载的接地连接。源端的数字I / O为负载提供电压源。 以一个由数字输入与数字输出相连…

javaEE -12(12000字CSS入门级教程)

css即层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离. CSS基本语法规范: 选择器 {一条/N条声明} 选择器决定针对谁修改 (找谁)声明决定修改啥. (干啥)声明的属性是…

Linux-mipi接口

mipi_csi接口 mipi_dsi接口

Qwt QwtPlotBarChart自定义条形统计图

1.概述 QwtPlotBarChart 是 Qt 绘图库 Qwt 中的一个类,用于绘制柱状图。它可以将数据通过柱形的高度来展示,方便比较不同数据量的大小差别。QwtPlotBarChart 类提供了一些方法和属性来设置柱形的样式、颜色、边界等。 以下是类的继承关系图&#xff1a…

oracle (8)Managing Tablespace Data File

Managing Tablespace & Data File (维护表空间和数据文件) 目标: 定义表空间和数据文件的用途创建表空间管理表空间学会使用甲骨文托管文件(OMF) 创建和管理表空间(不是重点)获取表空间信息 一、基础知识 1、表…

【0基础学Java第四课】-- 逻辑控制

4. 逻辑控制 4.1 顺序结构4.2 分支结构4.2.1 if语句判断一个数字是奇数还是偶数判断一个数字是正数,负数,还是零判断一个年份是否为闰年 4.2.2 switch 语句 4.3 while循环打印 1 - 10 的数字计算 1 - 100 的和计算 5 的阶乘计算1!2&#xff0…

FHE 的高精度算术:BGV-big、BFV-big

参考文献: [NL11] Naehrig M, Lauter K, Vaikuntanathan V. Can homomorphic encryption be practical?[C]//Proceedings of the 3rd ACM workshop on Cloud computing security workshop. 2011: 113-124.[GC15] Geihs M, Cabarcas D. Efficient integer encoding…

TypeScript:简介(附思维导图)

TypeScript:简介 Date: May 23, 2023 思维导图: TypeScript简介 注:已用XMind总结 什么是 TypeScript Typed JavaScript at Any Scale. 添加了类型系统的 JavaScript,适用于任何规模的项目。 以上描述是官网[1]对于 TypeScript…

【软考】14.3 设计模式

《设计模式》 有下划线:类模式 / 对象模式无下划线:对象模式 创建型 设计模式 创建对象 构建器(Builder):类和构造分离抽象工厂(Abstract Factory):抽象接口工厂(Factor…

Kubernetes Service 详解

Author:rab 目录 前言一、ClusterIP1.1 简介1.2 案例 二、NodePort2.1 简介2.2 案例 三、LoadBalancer3.1 简介3.1.1 MetalLB 简介3.1.2 MetalLB 部署3.1.3 MetalLB 配置3.1.3.1 Layer 2 模式3.1.3.2 BGP 模式 3.2 案例3.2.1 部署3.2.2 验证 四、ExternalName4.1 简…

大数据技能大赛平台搭建(容器环境)

大数据技能大赛平台搭建(容器环境) 一、Hadoop3.X 完成分布式安装部署1、 JDK安装1、解压jdk2、修改配置文件3、免密登录 2、hadoop集群环境搭建1、配置文件2、配置环境变量3、给slave1和slave2分发配置文件4、启动Hadoop集群 3、配置完成! 二…

奇富科技引领大数据调度革命:高效、稳定、实时诊断

日前,在世界最大的开源基金会 Apache旗下最为活跃的项目之一DolphinScheduler组织的分享活动上,奇富科技的数据平台专家刘坤元应邀为国内外技术工作者献上一场题为《Apache DolphinScheduler在奇富科技的优化实践》的精彩分享,为大数据任务调…

[推荐]SpringBoot,邮件发送附件含Excel文件(含源码)。

在阅读本文前,可以先阅读我的上一篇文章: SpringBoot,使用JavaMailSender发送邮件(含源码)。 ,本文使用的代码案例涉及到的 jar包、application.properties配置与它相同。 先看一下效果。 图一 图二 在下方代码案例中,…

智安网络|保护您的应用程序免受攻击:重要的安全强化措施

在今天的数字化时代,应用程序安全成为了企业和个人必须重视的重要领域。应用程序普遍存在的安全漏洞成为黑客们进行攻击的一个突破口。为了保护敏感数据和个人隐私,我们必须了解并实施一系列的关键措施来加固应用程序的安全性。 首先,一个关…

3D max软件有哪些技巧可快速选择区域?

使用3D max软件时,有新手朋友反馈说,为什么3dmax选择区域怎么改不了? 还有就是3dmax选择区域不显示该怎么办? 或者是3dmax选择区域变成圆形了。 针对以上这几类问题,只要掌握这几种方法就可以。小编整理了几种3D max…

一天收入500元的货拉拉运费差项目靠谱吗?

最近的货拉拉运费差项目有点火呀!收费也不低,1680-16980的比比皆是。 这个项目去年我就在某些平台看到过,今天就跟大家详细聊聊这个项目,想入坑的不妨先看看这篇文章。 一:项目原理 有人叫它货拉拉搬砖项目&#xf…