vue项目：webpack打包优化实践

news2024/11/25 22:43:34

本文目录

  • 一、项目基本信息
  • 二、分析当前项目情况
    • 1、使用 webpack-bundle-analyzer 插件
    • 2、使用 speed-measure-webpack-plugin 插件
  • 三、解决构建问题
    • 1、caniuse-lite 提示的问题
    • 2、 warning 问题
  • 四、打包速度优化
    • 1、修改source map
    • 2、处理 loader
  • 五、webpack性能优化
    • 1、使用Tree Shaking
    • 2、配置Gzip压缩
    • 3、配置devtool
    • 4、适用 uglifyjs-webpack-plugin 压缩js
    • 5、chunks 分割

一、项目基本信息

本次要进行webpack优化的项目是vue2开发的，基本信息如下：
在这里插入图片描述
在这里插入图片描述
vue.config.js配置如下：

module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].chunksSortMode = 'none';
      return args;
    });
  },
  devServer: {
    disableHostCheck: true,
    before: function(app) {
      app.get('/api/version', function(req, res) {
        res.json({
          data: 'V1.0.0',
          message: '',
          status: 0,
        });
      });
    },
    proxy: {
      '/api': {
        target: 'http://localhost:8080/',
        changeOrigin: true,
        autoRewrite: true,
        pathRewrite: {
          '^/api/': '/',
        },
      },
    },
  },
};

可以发现，这个项目基本没有做任何的优化。

二、分析当前项目情况

1、使用 webpack-bundle-analyzer 插件

该插件主要是分析项目各个模块的大小。

  • 安装：npm i webpack-bundle-analyzer -D
  • 使用：
// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  productionSourceMap: false,
  // webpack相关配置：该对象将会被webpack-merge合并入最终的webpack配置
  configureWebpack: config => {
    config.plugins.push(new BundleAnalyzerPlugin());
  },
}

  • 执行：npm run build --report
    在这里插入图片描述
    在这里插入图片描述

  • 浏览器默认打开：http://127.0.0.1:8888/ 得到
    在这里插入图片描述
    可以看到，不仅打包过程有warning，而且打包后最大的文件达竟然有4.17M！

  • new BundleAnalyzerPlugin 参数配置说明

new BundleAnalyzerPlugin({
    analyzerMode:'server', // 可以是 server、static、json、disabled。在server模式下，分析器将启动HTTP服务器来显示软件包报告。在“静态”模式下，会生成带有报告的单个HTML文件。在disabled模式下，你可以使用这个插件来将generateStatsFile设置为true来生成Webpack Stats JSON文件。
    analyzerHost: '127.0.0.1', // 将在“服务器”模式下使用的端口启动HTTP服务器
    analyzerPort: 8888, // 端口号
    reportFilename: 'report.html', // 路径捆绑，将在static模式下生成的报告文件。相对于捆绑输出目录
    defaultSizes: 'parsed', // 默认显示在报告中的模块大小匹配方式。应该是stat，parsed或者gzip中的一个
    openAnalyzer: false, // 在默认浏览器中是否自动打开报告，默认 true
    generateStatsFile: false, // 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
    statsFilename: 'stats.json', // 相对于捆绑输出目录
    statsOptions: null, //stats.toJson()方法的选项。例如，您可以使用source：false选项排除统计文件中模块的来源。在这里查看更多选项：https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
    logLevel: 'info', // 日志级别，可以是info, warn, error, silent
    excludeAssets:null, // 用于排除分析一些文件
})

2、使用 speed-measure-webpack-plugin 插件

通过这个插件分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让我们对打包时间较长的部分进行针对性优化。

  • 安装：npm i speed-measure-webpack-plugin -D
  • 使用：
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

module.exports = {
  productionSourceMap: false,
  // webpack相关配置：该对象将会被webpack-merge合并入最终的webpack配置
  configureWebpack: config => {
    config.plugins.push(new BundleAnalyzerPlugin());
    config.plugins.push(new SpeedMeasurePlugin());
  },
}
  • 重新执行打包命令npm run build --report ，在控制台就能看到如下信息：
    在这里插入图片描述通过smp 日志可以看到，打包整体输出时间竟然需要将近29s！打包速度慢主要集中在eslint-loader、less-loader等一些loader中。

但总的来说，无论是项目打包的文件大小，还是打包时间，都是无法忍受的！

三、解决构建问题

1、caniuse-lite 提示的问题

在进行打包的时候，发现控制台很多提示：Building for production...Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest
在这里插入图片描述

  • 办法1：根据日志提示的信息，caniuse lite过时了，直接按提示执行：npx update-browserslist-db@latest
    在这里插入图片描述
    caniuse-lite is outdated 仍然还有1个提示，说明其实问题并没有完全解决。

  • 方法2：直接删了 node_modules/caniuse-lite 文件夹，然后重新安装：npm i caniuse-lite -g
    在这里插入图片描述
    额。。。还是不能完全解决。

  • 办法3：先删了 node_modules/caniuse-lite 和 node_modules/browserslist 两个文件夹，然后执行：npm i caniuse-lite browserslist -D
    在这里插入图片描述
    然后执行打包命令，发现报错了！
    在这里插入图片描述
    好吧，删除了caniuse-lite 和 browserslist导致了，之前安装的 speed-measure-webpack-plugin 插件有问题，原因可能是三者之间存在某种关联关系，反正解决办法就是先删除package.json中的："speed-measure-webpack-plugin": "^1.5.0",然后重装speed-measure-webpack-plugin。
    在这里插入图片描述
    至此，终于把 caniuse-lite 过期的问题解决了。

2、 warning 问题

打包过程中，还发现有2个warning，必须给它解决了。
在这里插入图片描述
两个warning提示其实都差不多一个意思：就是文件过大的问题。

修改vue.config.js配置：

module.exports = {
  productionSourceMap: false,
  configureWebpack: config => {
    config.plugins.push(new BundleAnalyzerPlugin());
    config.plugins.push(new SpeedMeasurePlugin());
    // 性能提示配置
    config['performance'] = {
      hints: false, // 简单粗暴，关闭webpack的性能提示
      maxEntrypointSize: 512000, // 入口起点的最大体积，限制500kb
      maxAssetSize: 512000, // 生成文件的最大体积
    };
  },

执行打包命令，然后就不会再有warning提示。
在这里插入图片描述
接下来就可以继续进行优化了。

四、打包速度优化

1、修改source map

执行打包命令后，会发现打包后每个js文件都有一个map文件。
在这里插入图片描述
map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错，也就是说map文件相当于是查看源码的一个东西。

当然，这也会导致构建后的包体积会更大，所以，一般可以甚至，生产环境不用生成source map文件。

只需要vue.config.js里面配置：module.exports = { productionSourceMap: false }

生成map文件的包大小：
在这里插入图片描述
没有map文件的包大小：
在这里插入图片描述

2、处理 loader

在前面的速度分析中我们已经知道了打包速度主要耗费在 loader 的处理上。所以要想提升速度，就得针对性的解决各个loader。

// vue.config.js
module.exports = {
	// 生产环境是否生成 sourceMap 文件
	productionSourceMap: false, 
	configureWebpack: config => {
		// 新增配置
		config.module.rules.push(
	      {
	        test: /\.vue$/,
	        loader: 'vue-loader',
	        include: path.resolve('src'),
	        exclude: /node_modules/,
	      },
	      {
	        test: /\.js$/,
	        use: ['babel-loader'],
	        include: path.resolve('src'),
	        exclude: /node_modules/,
	      },
	      {
	        test: /\.less$/,
	        use: ['cache-loader'],
	        include: path.resolve('src'),
	        exclude: /node_modules/,
	      }
	    );
	}

运行打包命令，速度喜人！
在这里插入图片描述
浏览器上，各个模块如下：
在这里插入图片描述
至此，其实本文的主要目的，提升webpack打包速度就算达成了，当然webpack还有很多可以优化的手段和措施。

此时完整的vue.config.js如下：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

const path = require('path');

module.exports = {
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false, 
  configureWebpack: config => {
    // 性能配置
    config.performance = {
      hints: false, // 关闭性能提示
      maxEntrypointSize: 512000, // 入口起点的最大体积，限制500kb
      maxAssetSize: 512000, // 生成文件的最大体积
    };
    // 打包文件分析插件
    config.plugins.push(
      new BundleAnalyzerPlugin({
        openAnalyzer: true,
        analyzerPort: 8085,
      }),
      new SpeedMeasurePlugin() // 打包速度分析插件
    );
    // loader配置
    config.module.rules.push(
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        include: path.resolve('src'),
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        include: path.resolve('src'),
        exclude: /node_modules/,
      },
      {
        test: /\.less$/,
        use: ['cache-loader'],
        include: path.resolve('src'),
        exclude: /node_modules/,
      }
    );
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].chunksSortMode = 'none';
      return args;
    });
  },
  devServer: {},
};

接下来的优化重点阐述方案和实施，数据就不做过多对比了。

五、webpack性能优化

1、使用Tree Shaking

webpack官方说明：https://www.webpackjs.com/guides/tree-shaking/

  • 修改vue.config.js
module.exports = {
	// ...
	configureWebpack: config => {
		// ...
	    config.optimization = {
	      usedExports: true, // 设置 tree-shaking
	      // ...
	     }
	}
}
  • 修改package.json: "sideEffects": true

true 所有文件都不会受到 tree shaking 的影响
false 所有文件都会受到 tree shaking 的影响
[] 数组内的文件不受 tree shaking 的影响，其他受 tree shaking 的影响，例：[“.css", ".vue”]

2、配置Gzip压缩

从 webpack-bundle-analyzer 的分析结果，可以看到如果对打包的文件进行压缩，差异十分巨大，所以首先考虑优化的手段就是文件压缩。
在这里插入图片描述
本文中将利用 compression-webpack-plugin 插件来实现Gzip压缩。
安装：npm i compression-webpack-plugin -D
适用：

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
	// ...
	configureWebpack: config => {
		// ...
    	config.plugins.push(new CompressionPlugin()); // 开启gzip压缩
	}
}

配置说明：

// 只在生产环境配置Gzip压缩
if (process.env.NODE_ENV === 'production') {
	new CompressionPlugin({
	  filename: '[path].gz[query]', // 使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用，默认是：[path][base].gz
	  algorithm: 'gzip', // 默认压缩算法是gzip
	  test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩
	  threshold: 10240, // 以字节为单位压缩超过此大小的文件，使用默认值10240吧
	  minRatio: 0.8, // 最小压缩比率，官方默认0.8
	  // 是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
	  deleteOriginalAssets: false
	})
}

但是要进行Gzip压缩，同时必须要服务端支持，也就是在服务器上进行配置。，

比如：Nginx服务器可配置大概如下

server {
	# ....
	gzip on; # 开启gzip压缩
	gzip_min_length 4k; # 小于4k的文件不会被压缩，大于4k的文件才会去压缩
	gzip_buffers 16 8k; # 处理请求压缩的缓冲区数量和大小，比如8k为单位申请16倍内存空间；使用默认即可，不用修改
	gzip_http_version 1.1; # 早期版本http不支持，指定默认兼容，不用修改
	gzip_comp_level 2; # gzip 压缩级别，1-9，理论上数字越大压缩的越好，也越占用CPU时间。实际上超过2的再压缩，只能压缩一点点了，但是cpu确是有点浪费，因为2就够用了
	 # 压缩的文件类型MIME类型
	gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf;
	gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，一般情况下建议开启   
}

参数详细说明：

  • gzip：是否开启gzip模块。
  • gzip_disable：指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配)，(IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩)。
  • gzip_vary：增加响应头“Vary: Accept-Encoding”。
  • gzip_proxied：Nginx做为反向代理的时候启用，

    off：关闭所有的代理结果数据压缩
    expired：如果header中包含“Expires”头信息，启用压缩·
    no-cache：如果header中包含“Cache-Control:no-cache”头信息，启用压缩
    no-store：如果header中包含“Cache-Control:no-store”头信息，启用压缩
    private：如果header中包含“Cache-Control:private”头信息，启用压缩
    no_last_modified：如果header中包含“Last_Modified”头信息，启用压缩
    no_etag：如果header中包含“ETag”头信息，启用压缩
    auth：如果header中包含“Authorization”头信息，启用压缩
    any：无条件压缩所有结果数据

  • gzip_comp_level：设置gzip压缩等级，范围是1-9，等级越低，压缩速度越快，文件压缩比越小，反之速度越慢文件压缩比越大。
  • gzip_buffers：设置用于处理请求压缩的缓冲区数量和大小。比如32 4K表示按照内存页（one memory page）大小以4K为单位（即一个系统中内存页为4K），申请32倍的内存空间。建议此项不设置，使用默认值。
  • gzip_http_version：用于识别http协议的版本，早期的浏览器不支持gzip压缩，用户会看到乱码，所以为了支持前期版本加了此选项。默认在http/1.0的协议下不开启gzip压缩。
  • gzip_types：设置需要压缩的MIME类型，如果不在设置类型范围内的请求不进行压缩。

由于本次只是前端优化，暂时没有服务端支持，所以Gzip压缩效果暂时没办法测试。

3、配置devtool

在上文其实介绍过source map了，但是只是建议对生产环境不需要map文件，实际上也可以在生产环境生成map文件，那么就可以参考以下配置和说明。

configureWebpack: config => {
	// ...
	if (process.env.NODE_ENV === 'production') {
	  // 生产环境
      config['devtool'] = 'source-map'; // 整个source map作为一个单独的文件生成。为bundle添加了一个引用注释，以便开发工具知道在哪里可以找到它。
    } else {
      // 非生产环境
      config['devtool'] = 'eval';
    }
}

配置说明：

（开发环境的配置）

  • eval：每个模块都使用eval()执行，并且都有//@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。
  • eval-source-map：每个模块使用eval()执行，并且 source map 转换为 DataUrl 后添加到eval()中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
  • cheap-eval-source-map：类似eval-source-map，每个模块使用eval()执行。这是 “cheap(低开销)” 的 source map，因为它没有生成列映射(column mapping)，只是映射行数。它会忽略源自 loader 的 source map，并且仅显示转译后的代码，就像evaldevtool。
  • cheap-module-eval-source-map：类似cheap-eval-source-map，并且，在这种情况下，源自 loader 的 source map 会得到更好的处理结果。然而，loader source map 会被简化为每行一个映射(mapping)。

（生产环境的配置）

  • none:（省略devtool选项）不生成 source map。这是一个不错的选择。
  • source-map：整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。
  • hidden-source-map：与source-map相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。
  • nosources-source-map：创建的 source map 不包含sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。

更多可查看官方：https://webpack.js.org/configuration/devtool/

4、适用 uglifyjs-webpack-plugin 压缩js

安装：npm install uglifyjs-webpack-plugin --save-dev
使用：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    config.plugins.push(
    	new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            drop_debugger: true,
            drop_console: true, // 生产环境自动删除console
          },
          warnings: false,
        },
        sourceMap: false,
        parallel: true, // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
      })
  )
}

官方更多字段说明：https://www.npmjs.com/package/uglifyjs-webpack-plugin?activeTab=readme

5、chunks 分割

module.exports = {
	configureWebpack: config => {
		config.optimization = {
	      // 设置 tree-shaking
	      usedExports: true, 
	      // 抽离公共的代码
	      splitChunks: {
	        chunks: 'all',
	        cacheGroups: {
	          common: {
	            name: 'common', // 指定chunks名称
	            minChunks: 1,
	            test: /[\\/]node_modules[\\/]vue[\\/]|[\\/]node_modules[\\/]vue-router[\\/]|[\\/]node_modules[\\/]vuex[\\/]|[\\/]node_modules[\\/]axios[\\/]/,
	            chunks: 'initial', // 仅限于最初依赖的第三方
	            priority: -1, // 优先级：数字越大优先级越高，默认值为0，自定义的一般是负数形式，决定cacheGroups中相同条件下每个组执行的优先顺序。
	          },
	          elementUI: {
	            name: 'elementUI',
	            minChunks: 1,
	            test: /[\\/]node_modules[\\/]_?element-ui[\\/]/,
	            chunks: 'initial',
	            priority: -2,
	            reuseExistingChunk: true,
	            enforce: true,
	          },
	        },
	      },
	    };
	}
}

splitChunks字段说明：

chunks: "async",  // 需要进行分割的chunks，可选值有：async，initial和all
minSize: 30000, // 新分离出的chunk必须大于等于minSize，默认为30000，约30kb。
minChunks: 1, //  一个模块至少应被minChunks个chunk所包含才能分割。默认为1。
maxAsyncRequests: 5, //  按需加载文件时，并行请求的最大数目。默认为5。
maxInitialRequests: 3, //  加载入口文件时，并行请求的最大数目。默认为3。
automaticNameDelimiter: '~', //  拆分出的chunk的名称连接符。默认为~。如chunk~vendors.js
name: true, // 设置chunk的文件名。默认为true。当为true时，splitChunks基于chunk和cacheGroups的key自动命名。
cacheGroups: {
	// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块，就分配到该组。
	// 模块可以被多个组引用，但最终会根据priority来决定打包到哪个组中。
	// 默认将所有来自 node_modules目录的模块打包至vendors组，将两个以上的chunk所共享的模块打包至default组。
    vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
    },
default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
    }
}

webpack优化的措施还有使用CDN、使用缓存、设置预解析、优化图片/字体等等。

没有绝对的优化措施，只有适合的方案， 性能优化之路漫漫～

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

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

相关文章

SPI机制详解

SPI机制详解

SPI机制详解 什么是SPI机制？ SPI：Service Provider Interface，中文直译：服务提供者接口，它通过在ClassPath路径下的META-INF/service文件夹中查找文件，并自动加载文件里所定义的类 在面向对象的设计原则…
阅读更多...
Linux中文件的权限

Linux中文件的权限

我们首先需要明白，权限 用户角色 文件的权限属性 一、拥有者、所属组和other（用户角色） 以文件file1为例 第一个箭头所指处即是文件的拥有者，拥有者为zz 第二个箭头所指处即使文件的所属组，所属组为zz 除去拥有者…
阅读更多...
利用高分五号02星高光谱数据进行地物识别

利用高分五号02星高光谱数据进行地物识别

高分五号02星搭载了一台60公里幅宽、330谱段、30米分辨率的可见短波红外高光谱相机（AHSI），可见近红外（400~1000nm）和短波红外光谱（1000~2500nm）分辨率分别达到5纳米和10纳米。单看参数性能优越&…
阅读更多...
spring boot使用mybatisplus访问mysql的配置流程

spring boot使用mybatisplus访问mysql的配置流程

网上教程大多教人新建一个带对应组件的项目，本文记录如何在一个已有springboot2.x项目中，配置使用mybatisplus来访问mysql。包括使用wrapper和自己写mapper.xml的自定义函数两种和数据库交互的方式。 关于项目的创建，参考创建springboot 2.x…
阅读更多...
PFMEA的输入输出和特殊特性

PFMEA的输入输出和特殊特性

DFMEA輸入：技术条件、市场需求 DFMEA輸出：产品特殊特性、试验、样件CPPFMEA輸入：过往经验、流程图、DPMEA PFMEA輸出：CP、过程特殊特性、SIP、SOP1. PFMEA的输入包括：（）过程流程图、DFMEA 、图样…
阅读更多...
基于springboot+vue的线上教育系统（源码+论文）

基于springboot+vue的线上教育系统（源码+论文）

目录 前言 一、功能设计 二、功能实现 三、库表设计 四、论文 前言 现在大家的生活方式正在被计算机的发展慢慢改变着，学习方式也逐渐由书本走向荧幕,我认为这并不是不能避免的,但说实话,现在的生活方式与以往相比有太大的改变，人们的娱乐方式不仅仅…
阅读更多...
P4513 小白逛公园 习题笔记（线段树维护区间最大连续子段和）

P4513 小白逛公园 习题笔记（线段树维护区间最大连续子段和）

传送门https://www.luogu.com.cn/problem/P4513本文参考了董晓老师的博客 这道题着实想了很长时间（新手），只能想到一个O（mn）的dp普通写法，那么遇上区间修改问题改怎么操作呢。答案很明显，线段树…
阅读更多...
微服务day01 -- SpringCloud01 -- (Eureka , Ribbon , Nacos)

微服务day01 -- SpringCloud01 -- (Eureka , Ribbon , Nacos)

介绍微服务 1.认识微服务(p1-p5) 随着互联网行业的发展，对服务的要求也越来越高，服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢？ 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构&#…
阅读更多...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的稻田虫害检测系统详解（深度学习+Python代码+UI界面+训练数据集）

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的稻田虫害检测系统详解（深度学习+Python代码+UI界面+训练数据集）

摘要：本篇文章深入探讨了如何利用深度学习技术开发一个用于检测稻田虫害的系统，并且分享了完整的实现过程和资源代码下载。该系统采用了当前的YOLOv8、YOLOv7、YOLOv6、YOLOv5算法，对其进行了性能对比，包括mAP、F1 Score等关键指标…
阅读更多...
redis中通用命令以及key过期策略

redis中通用命令以及key过期策略

通用命令 exists 判断某个key是否存在。 exists key时间复杂度：O(1) 返回值：key 存在的个数。 del 删除指定的 key，可以一次删除一个或者多个。 del key时间复杂度：O(1) 返回值：删除掉的 key 的个数。 expire…
阅读更多...
根据索引策略对elasticsearch中的索引进行管理(附带图文教程)

根据索引策略对elasticsearch中的索引进行管理(附带图文教程)

前言 这是我在这个网站整理的笔记,有错误的地方请指出，关注我，接下来还会持续更新。 作者：神的孩子都在歌唱 一. 索引生命周期简介 想要了解更多可以看 ： 索引生命周期 1.1 索引生命周期五种阶段 （1）Hot…
阅读更多...
C++开发基础——类模板

C++开发基础——类模板

一，基础定义 类模板是用来生成类的蓝图，是一种创建类的方式，同一套类模板可以生成很多种不同的类。 编译器基于类模板生成的每个类被称为类模板的实例。 第一次使用模板类型声明变量时，会创建类模板的一个实例， 以后…
阅读更多...
YOLOv5改进 | 注意力篇 | 利用YOLO-Face提出的SEAM注意力机制优化物体遮挡检测（附代码 + 修改教程）

YOLOv5改进 | 注意力篇 | 利用YOLO-Face提出的SEAM注意力机制优化物体遮挡检测（附代码 + 修改教程）

一、本文介绍 本文给大家带来的改进机制是由YOLO-Face提出能够改善物体遮挡检测的注意力机制SEAM，SEAM（Spatially Enhanced Attention Module）注意力网络模块旨在补偿被遮挡面部的响应损失，通过增强未遮挡面部的响应来实现这一目…
阅读更多...
el-Switch 开关二次确认

el-Switch 开关二次确认

前言 最近在做毕设，有个需求是点击按钮控制用户的状态是否禁用，就看到element有个switch组件可以改造一下，就上网看了一下，结果为了这个效果忙活了很久。。。所以说记录一下，让大家少踩坑。 前置条件 先看完我的需求再…
阅读更多...
Eclipse安装springboot

Eclipse安装springboot

Eclipse免费，套件丰富，代码开源，功能强大…推荐！ 1 下载eclipse: https://www.eclipse.org/downloads/download.php?file/technology/epp/downloads/release/2023-12/R/eclipse-jee-2023-12-R-win32-x86_64.zip 2 安装Spring框…
阅读更多...
图论（蓝桥杯 C++ 题目 代码 注解）

图论（蓝桥杯 C++ 题目 代码 注解）

目录 迪杰斯特拉模板（用来求一个点出发到其它点的最短距离）： 克鲁斯卡尔模板（用来求最小生成树）： 题目一（蓝桥王国）： 题目二（随机数据下的最短路径&#…
阅读更多...
Hadoop学习2：完全分布集群搭建

Hadoop学习2：完全分布集群搭建

文章目录 Fully-Distributed Operation（完全分布模式） 重点机器环境同步集群规划配置文件修改以及同步步骤0：下面其他步骤涉及修改配置以这里为准（要不然部署使用过程会有很多问题）通用配置（三台节点机器&a…
阅读更多...
社交革命的引领者：探索Facebook如何改变我们的生活方式

社交革命的引领者：探索Facebook如何改变我们的生活方式

1.数字社交的兴起 随着互联网的普及，社交媒体成为我们日常生活的重要组成部分。Facebook作为其中的先驱，从最初的社交网络演变成了一个拥有数十亿用户的全球化平台。它不仅改变了我们与世界互动的方式，还深刻影响了我们的社交习惯、人际关系以…
阅读更多...
华为机考：HJ102 字符统计

华为机考：HJ102 字符统计

华为机考&#xff1a;HJ102 字符统计 描述 方法1 先将所有字符计算数量&#xff0c;在对比其中字符的assic码 #include<iostream> #include<vector> #include<algorithm> #include<string> using namespace std; bool cmp(pair<char, int> a,…
阅读更多...
C++ std::list的merge()使用与分析

C++ std::list的merge()使用与分析

看到《C标准库第2版》对list::merge()的相关介绍&#xff0c;令我有点迷糊&#xff0c;特意敲代码验了一下不同情况的调用结果。 《C标准库第2版》对list::merge()的相关介绍 list::merge()定义 merge()的作用就是将两个list合并在一起&#xff0c;函数有2个版本&#xff1a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023