Umijs项目优化

首先通过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.rhkb.cn/news/177622.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Unity ShaderGraph】| 快速制作一个 抖动效果

前言 【Unity ShaderGraph】| 快速制作一个 抖动效果一、效果展示二、UV抖动效果三、应用实例 前言 本文将使用ShaderGraph制作一个抖动效果,可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章:【Unity ShaderGraph】| Shader Gr…

Linux系统编程,socket通信编程实践练习(C语言)

文章目录 Linux系统编程&#xff0c;socket通信编程实践练习&#xff08;C语言&#xff09;1.服务端代码2.客户端代码 Linux系统编程&#xff0c;socket通信编程实践练习&#xff08;C语言&#xff09; 1.服务端代码 #include <stdio.h> #include <stdlib.h> #in…

Maven Repository使用

1.Maven Repository网站 https://mvnrepository.com/https://mvnrepository.com/ 2.查询需要的依赖 3.参考例子 <!-- https://mvnrepository.com/artifact/org.freeswitch.esl.client/org.freeswitch.esl.client --> <dependency> <groupId>org.freesw…

【c++|opencv】一、基础操作---3.访问图像元素

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 访问图像元素 1. 访问图像像素 1.1 访问某像素 //灰度图像&#xff1a; image.at<uchar>(j, i) //j为行数&#xff0c;i为列数 //BGR彩色图像 i…

智慧矿山:AI算法在带式运输机中的异物识别应用

随着现代农业和工业的发展&#xff0c;带式运输机在各种生产作业中发挥着越来越重要的作用。然而&#xff0c;在带式运输机运行过程中&#xff0c;可能会混入各种异物&#xff0c;这些异物的存在可能会对运输过程和设备本身造成损害。为了解决这一问题&#xff0c;本文将介绍一…

[PHP]pearProject协作系统 v2.8.14 前后端

pearProject是一款轻量级的在线项目/任务协作系统&#xff0c;远程办公协作。 概述 PearProject 不支持 IE8 及以下版本&#xff0c;建议使用基于Webkit内核的现代浏览器访问 PearProject 为前后端分离架构&#xff0c;因此安装分为后端和前端两大部分&#xff0c;需要分别进…

Kafka、RabbitMQ、RocketMQ中间件的对比

消息中间件现在有不少&#xff0c;网上很多文章都对其做过对比&#xff0c;在这我对其做进一步总结与整理。 RocketMQ 淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件&#xff0c;使用Mysql作为消息存储媒介&#xff0c;可完全水平扩容&#xff0c;为了进一步降低成…

SolidWorks2019安装教程(正版)

网盘资源附文末 一.简介 SolidWorks软件是世界上第一个基于Windows开发的三维CAD系统&#xff0c;由于技术创新符合CAD技术的发展潮流和趋势&#xff0c;SolidWorks公司于两年间成为CAD/CAM产业中获利最高的公司。良好的财务状况和用户支持使得SolidWorks每年都有数十乃至数百…

前端实验(一)单页面应用的创建

实验目的 掌握使用vite创建vue3单页面程序命令熟悉所创建程序的组织结构熟悉单页面程序运行原理能够编写简单的单页面程序 实验内容 创建一个名为vue-demo的单页面程序编写简单的单页面程序页面运行单页面程序 实验步骤 使用vite创建单页面程序 创建项目名为目录vue-demo的…

基于nodejs+vue啄木鸟便民维修网站设计与实现

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

Spring-创建非懒加载的单例Bean源码

补充&#xff1a;关于扫描的逻辑 /*** Scan the class path for candidate components.* param basePackage the package to check for annotated classes* return a corresponding Set of autodetected bean definitions*/ public Set<BeanDefinition> findCandidateCo…

HarmonyOS(二)—— 初识ArkTS开发语言(中)之ArkTS的由来和演进

前言 在上一篇文章HarmonyOS&#xff08;二&#xff09;—— 初识ArkTS开发语言&#xff08;上&#xff09;之TypeScript入门&#xff0c;我初识了TypeScript相关知识点&#xff0c;也知道ArkTS是华为基于TypeScript发展演化而来。 从最初的基础的逻辑交互能力&#xff0c;到…

SSE(SeverSideEvent)服务端推送技术

SSE应用场景1&#xff1a; ChatGPT的打字效果&#xff1a; 可以看到ChatGPT的输出是逐字输出的打字效果&#xff0c;这里应用到了SSE&#xff08;SeverSideEvent&#xff09;服务端推送的技术。一个SSE服务的Chrome开发工具化network截图 &#xff1a; SSE原理 HTTP 服务器…

java反射API

反射 什么是Java的动态机制什么是反射机制什么是Class类Class提供了诸多的get方法 反射机制实例化对象Class提供了一个方法 Constructor类指定构造器实例化对象 Method类获取一个类中的所有方法Class类提供了对应的方法 获取本类自定义的所有方法Class类提供了对应的方法 获取表…

RabbitMQ 运维 扩展

1、集群管理与配置 1.1、集群搭建 关于Rabbitmq 集群的搭建&#xff0c;详见以下文章。简单说来就是将多个单机rabbitmq服务&#xff0c;通过给到一致的密钥&#xff08;.erlang.cookie&#xff09;并且开放rabbitmq服务的 25672 端口&#xff0c;允许多节点间进行互相通讯&am…

基于单片机设计的太阳能跟踪器

一、前言 随着对可再生能源的需求不断增长&#xff0c;太阳能作为一种清洁、可持续的能源形式&#xff0c;受到越来越多的关注和应用。太阳能光板通常固定在一个固定的角度上&#xff0c;这限制了它们对太阳光的接收效率。为了充分利用太阳能资源&#xff0c;提高太阳能光板的…

【ChatGPT从瀑布模式到水母模式】如何赋能软件研发全流程?

【文末送书】今天推荐一本强大工具书《ChatGPT 驱动软件开发&#xff1a;AI 在软件研发全流程中的革新与实践》&#xff0c;本文将从其亮点与结构出发&#xff0c;详细阐发其对于运维、项目经理、程序员等的重要性与益处。 文章目录 导语内容作者简介专家推荐读者对象直播预告文…

怎样解决“缺失msvcp110.dll”错误,msvcp110.dll的修复教程

在计算机使用过程中&#xff0c;我们可能会遇到一些系统错误提示&#xff0c;比如“msvcp110.dll文件丢失”。这是因为msvcp110.dll是Microsoft Visual C 2012的一个动态链接库文件&#xff0c;如果这个文件丢失或者损坏&#xff0c;就可能导致某些程序无法正常运行。那么&…

(四)docker:为mysql和java jar运行环境创建同一网络,容器互联

看了很多资料&#xff0c;说做互联的一个原因是容器内ip不固定&#xff0c;关掉重启后如果有别的容器启动&#xff0c;之前的ip会被占用&#xff0c;所以做互联创建一个网络&#xff0c;让几个容器处于同一个网络&#xff0c;就可以互联还不受关闭再启动ip会改变的影响&#xf…

C++标准模板(STL)- 类型支持 (类型属性,is_volatile,is_trivial,is_const)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…