Webpack5 基本使用 - 3(完结)

环境区分

可以定义多个配置文件,通过 webpack-merge 合并配置文件。
安装 webpack-merge

yarn add webpack-merge

公共配置

// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: path.join(__dirname, 'index'),module: {rules: [{test: /\.js$/,use: ['babel-loader'],include: path.join(__dirname, 'src'),exclude: /node_modules/},]},plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'src/index.html'),filename: 'index.html'})]
};

开发环境配置

// webpack.dev.js
const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const webpackCommonConf = require('./webpack.common.js');module.exports = merge(webpackCommonConf, {mode: 'development',plugins: [// 定义环境变量new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('development')})],devServer: {port: 8080, // 修改端口号hot: true, // 开启 HMR:开启后 index.html 不会自动刷新static: {watch: true, // 自动刷新浏览器staticOptions: {progress: true, // 显示打包的进度条contentBase: path.join(__dirname, 'dist') // 指定运行代码的目录,输出在内存中,看不到}},open: true, // 自动打开浏览器compress: true, // 启动 gzip 压缩// 设置代理proxy: {// 将本地 /api/xxx 代理到 localhost:3000/api/xxx'/api': 'http://localhost:3000',// 将本地 /api2/xxx 代理到 localhost:3000/xxx'/api2': {target: 'http://localhost:3000',pathRewrite: {'/api2': ''}}}}
});
// package.json
{"name": "webpack5-zql","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "webpack-dev-server --config webpack.dev.js",},
}

生产环境配置

// webpack.prod.js
const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const webpackCommonConf = require('./webpack.common.js');module.exports = merge(webpackCommonConf, {mode: 'production',output: {filename: 'bundle.[contenthash:8].js', // 输出文件名,打包代码时加上 hash 戳可以命中缓存path: path.join(__dirname, 'dist'), // 输出的文件目录clean: true, //// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到},plugins: [new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production')})]
});
// package.json
{"name": "webpack5-zql","version": "1.0.0","description": "","main": "index.js","scripts": {"build": "webpack --config webpack.prod.js"},
}

提升开发体验

  • SourceMap(源代码映射):用来生成源代码与构建后代码一一映射的文件。
  • 它会生成一个 xxx.map 文件,里面包含换代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了,会通过 xxx.map 文件,从构建后代码出错的位置找到映射后源代码出错的位置,帮助我们更快的找到错误根源。

通过 webpack.devtool 配置源代码映射。

开发环境

  • 开发环境:cheap-module-source-map
  • 打包编译速度快,只包含行映射,没有列映射。
module.exports = {mode: 'development',devtool: 'cheap-module-source-map'
};

生产环境

  • 生产环境:source-map
  • 包含行、列映射,打包速度编译慢
module.exports = {mode: 'production',devtool: 'source-map'
};

优化打包构建速度

HMR(仅开发环境)

  • 开发时,我们修改了其中一个模块代码,webpack 默认会将所有模块全部重新打包,速度很慢,所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他的模块不变,这样打包速度就可以加快。
  • Hot Module Replacement (热模块替换):在程序运行中,替换、添加或删除模块,而无序重新打包整个模块。
module.exports = {mode: 'development',devServer: {hot: true // 开启 HMR,默认是 true}
};
  • 开发环境下,css 文件默认支持 HMR,是因为 style-loader 做了支持,如果使用 MiniCssExtractPlugin.loadercssHMR 会失效,所有开发环境下请使用 style-loader ,生产环境下使用 MiniCssExtractPlugin.loader

  • js 文件默认是不支持 HMR 的,修改 js 文件依然会全部代码重新打包,如果想让某个 js 文件支持 HMR,那么需要在入口文件中写上如下代码:

if (module.hot) {// 首先判断是否支持 HMR 功能,因为有些低版本浏览器是不支持的module.hot.accept('./common/utils/add.js'); // 接收 add.js,一旦 add.js 发生变化,就只加载这个文件// 由于开发项目这样写起来很麻烦,所以可以采用 loader 自动实现// 开发 vue 项目可以使用 vue-loader// 开发 react 项目可以使用 react-hot-loader
}

HMR 原理

webpack-dev-server 会创建两个服务:express 服务(提供静态资源) 和 socket 服务(服务器可以主动发送文件到客户端)。

  • express server 负责直接提供静态资源的服务:打包后的资源直接被浏览器请求和解析。
  • HMR Socket Server,是一个 socket 的长连接,建立连接后双方可以通信,服务器可以直接发送文件到客户端。而 http 请求必须要浏览器主动发起请求。

当服务器监听到对应的模块发生变化时,会生成两个文件。 manifest.json 文件记录更新的位置信息等配置信息,update chunk .js 文件记录实际更新的具体内容。通过长连接,可以直接将这两个文件主动发送给浏览器,浏览器拿到两个新的文件后,通过 HMR runtime 机制(webpack 在打包的时候提供),加载这两个文件,并且针对修改的模块进行更新。

oneOf

优化生产环境构建打包速度。

正常来讲,一种文件只能被一个 loader 处理。当一种文件要被多个 loader 处理,那么一定要指定 loader 执行的先后顺序:比如处理 js 时,先执行 eslint 再执行 babel

假如有 10loader,打包一种文件时就会轮询 10loader
如果用了oneOf,只要匹配到了这个loader就不会再往后面继续轮询。但是oneOf里面不能有两个配置处理同一种类型文件,相同的话需要抽出一个放在oneOf 外面,然后指定优先执行。

module.exports = {module: {rules: [{test: /\.(js|jsx)/,loader: 'eslint-loader',enforce: 'pre', // 指定优先执行},{oneOf: [// oneOf 里的 loader 只会执行一个{test: /\.(js|jsx)/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.css/,use: ['style-css','css-loader']}]}]}
};

include / exclude

开发时我们需要使用第三方库或插件,所有文件都下载到 mode_modules 中了,而这些文件是不需要编译可以直接使用的。
所以我们在对 js 文件处理时,需要排查 node_modules 下面的文件。
include:包含,只处理 xxx 文件
exclude:排除,除了 xxx 文件以外的其他文件都要处理
includeexclude 只能写一个,要们包含,要么排除。

module.exports = {module: {rules: [{test: /\.js$/,loader: 'babel-loader',exclude: "mode_modules" // 默认值 mode_modules}]}
};
module.exports = {module: {rules: [{test: /\.js$/,loader: 'babel-loader',include: path.join(__dirname, 'src')}]}
};

cache

每次打包时 js 文件都要经过 eslint 检查和 babel 编译,速度比较慢。
我们可以缓存之前的 eslint 检查和 babel 编译结果,这样第二次打包时速度就会更快了。
cache - 会对 eslint 检查和 babel 编译结果进行缓存。

module.exports = {module: {rules: [{test: /\.js$/,use: 'babel-loader',include: path.resolve(__dirname, 'src'),options: {cacheDirectory: true, // 开启 babel 缓存,会默认缓存到 node_modules/.cache 目录下cacheCompression: false // 关闭缓存的压缩}},]},plugins: [new EslintPlugin({context: path.resolve(__dirname, 'src'), // 需要检测的目录extensions: ['js', 'jsx', 'json'], // 需要检查的文件类型fix: true, // 自动修复cache: true, // 开球 eslint 缓存cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache') // 指定缓存的位置})]
};

Thread

当项目越来越大时,打包速度越来越慢。
我们想要继续提升打包速度,其实就是要提升 js 的打包速度,因为其他文件都比较少。
而对 js 文件的处理主要是 eslint、babel、Terser 三个工具,所以我们要提升他们的运行速度。我们可以开启多进程同时处理 js 文件,这样速度就比之前的单进程打包更快了。

  • 多进程打包:开启电脑的多个进程同时干一件事,速度更快。

  • 注意:仅在特别耗时的操作中使用,因为每个进程启动就大约有 600ms 左右的开销。

  • 启动进程的数量就是我们 cpu 的核数

// 由于每个电脑获取 cpu 核数方式都不一样
// 所以使用 nodejs 核心模块来直接使用
const os = require('os'); // 返回 cpu 的一些信息
const threads = os.cpus().length; // cpu 核数

安装 thread-loader

yarn add thread-loader
  • 一般在 babel-loader 进行打包的时候使用,因为处理语法转换很耗时。
  • 一般放在需要处理的那个 loader 之后调用。
const os = require('os');const threads = os.cpus().length;module.exports = {module: {rules: [{test: /\.js$/,exclude: /mode_modules/,use: [{loader: 'thread-loader',options: {workers: threads // 开启多进程和设置进程数量}},{loader: 'babel-loader',options: {cacheDirectory: true, // 开启 babel 缓存,会默认缓存到 node_modules/.cache 目录下cacheCompression: false // 关闭缓存的压缩}}]}]},plugins: [new EslintPlugin({context: path.resolve(__dirname, 'src'), // 需要检测的目录extensions: ['js', 'jsx', 'json'], // 需要检查的文件类型fix: true, // 自动修复cache: true, // 开球 eslint 环迅cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'), // 指定缓存的位置threads // 开启多进程和设置进程数量})],optimization: {minimize: true,minimizer: [new TerserWebpackPlugin({parallel: threads // 开启多进程和设置进程数量})]}
};

减少代码体积

Tree Shaking

开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。如果诶呦特殊处理的话,我们打包时会引入整个库,但是实际上我们可能只用上极小部分的功能,这样把真个库都打包进来,题久就太大了。

  • Tree Shaking:通常用于描述移除 js 中没有使用上的代码。注意:它依赖 es module
  • weboack 生产模式下已经默认开启了这个功能,无需其他配置。

减小 babel 体积

babel 为编译的每个文件都插入了辅助代码,使体积过大。
babel 对一些公共方法使用了非常小的辅助代码,比如 _extend。默认情况下会被添加到每一个需要它的文件中。你可以将这些辅助代码作为一个独立的模块,来避免重复引入。
@babel/plugin-transform-runtime:禁用了 babel 自动对每个文件的 runtime 注入,而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。
安装 @babel/plugin-transform-runtime

yarn add  @babel/plugin-transform-runtime
module.exports = {module: {rules: [{test: /\.js$/,exclude: /mode_modules/,use: [{loader: 'babel-loader',options: {cacheDirectory: true, // 开启 babel 缓存,会默认缓存到 node_modules/.cache 目录下cacheCompression: false, // 关闭缓存的压缩plugins: ['@babel/plugin-transform-runtime'] // 较少代码体积}}]}]},
};
// 第二种配置
// .babelrc
{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-transform-runtime"]
}

压缩图片

安装 image-minimizer-webpack-plugin、imagemin

yarn add image-minimizer-webpack-plugin imagemin -D

无损压缩:下载 imagemin-gifsicle、 imagemin-jpegtran、 imagemin-optipng、 imagemin-svgo

yarn add  imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

有损压缩:下载 imagemin-gifsicle、 imagemin-mozjpeg、 imagemin-pngquant、 imagemin-svgo

yarn add imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
module.exports = {optimization: {minimize: true,minimizer: [// 压缩图片new ImageMinimizerWebpackPlugin({minimizer: {implementation: ImageMinimizerWebpackPlugin.imageminGenerate,options: {plugins: [['gifsicle', { interlaced: true }],['jpegtran', { progressive: true }],['optipng', { optimizationLevel: 5 }],['svgo',{plugins: ['preset-default','prefixIds',{name: 'sortAttrs',params: {xmlnsOrder: 'alphabetical'}}]}]]}}})]}
};

优化代码运行性能

code split

打包代码时会将所有 js 文件打包到一个文件中,体积太大了。我们如果只要渲染首页,就应该只加载首页的 js 文件,其他文件不应该加载。
所以我们需要将打包生成的文件进行代码分割,生成多个 js 文件,渲染哪个页面就只加载某个 js 文件,这样加载的资源就少,速度就更快。

code split:主要做了两件事。

  • 分割文件:将打包生成的文件进行分割,生成多个 js 文件
  • 按需加载:需要哪个文件就加载哪个文件

多入口提取文件

正常情况下,有几个入口就会输出几个 bundle,如果 AB 都引用了模块 C,那么输出后的 bundleAbundleB,模块 C 就会分别打包两次。
那么我们可以将 C 单独输出成一个 bundleC,然后bundleAbundleB 去复用。

// add.js
const add = (a, b) => a + b;export default add;
// index.js
import add from '@utils/add';console.log(add(1, 6));
// other.js
import add from '@utils/add';console.log(add(1, 4));
const path = require('path');module.exports = {mode: 'production',entry: {app: './src/index.js',main: './src/other.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js'},optimization: {splitChunks: {chunks: 'all', // 对所有模块都进行分割// 以下是默认值// minSize: 20000, // 分割代码最小的大小// minRemainingSize: 0, // 类似于 minSize 最后取保提取的文件大小不能为0// minChunks: 1, // 至少被引用的次数,满足条件才会代码分割// mazAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量// maxInitialRequests: 30, // 入口 js 文件最大并行请求数量// enforceSizeThreshold: 50000, // 超过 50kb 一定会单独打包(此时会忽略 minRemainingSize、mazAsyncRequests、maxInitialRequests)// cacheGroups: { // 分组,哪些模块要打包到一个组//     defaultVendors: { // 组名//         test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块//         priority: -10, // 权重(越大越高)//         reuseExistingChunk: true // 如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块//     },//     default: { // 其他没有写的配置会使用默认值//         minChunks: 2, // 这里的 minChunks 权重更大//         priority: -20,//         reuseExistingChunk: true//     }// },// 修改配置cacheGroups: {default: { // 其他没有写的配置会使用默认值minSize: 0, // 我们定义的文件体积太小了,所以要改打包的最小文件体积minChunks: 2, // 这里的 minChunks 权重更大priority: -20,reuseExistingChunk: true}}}}
};

在这里插入图片描述

多入口按需加载

实现按需加载,动态导入模块。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 class="title">hello webpack5</h1><button id="btn">按钮</button>
</body>
</html>
// add.js
const add = (a, b) => a + b;export default add;
// count.js
export const count = (a, b) => a - b;
// index.js
import add from './add';console.log(add(1, 6));
// other.js
document.getElementById('btn').onclick = function () {// 动态引入 -> 实现按需加载// 即使只被引用了一次,也会代码分割import('./count.js').then(({ count }) => {alert(count(1, 4));});
};
const path = require('path'),HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'production',entry: {app: './src/index.js',main: './src/other.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js'},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src/index.html'),filename: 'index.html'})],optimization: {splitChunks: {chunks: 'all', // 对所有模块都进行分割// 修改配置cacheGroups: {default: { // 其他没有写的配置会使用默认值minSize: 0, // 我们定义的文件体积太小了,所以要改打包的最小文件体积minChunks: 2, // 这里的 minChunks 权重更大priority: -20,reuseExistingChunk: true}}}}
};

单入口提取文件按需加载

// count.js
export const count = (a, b) => a - b;
// index.js
document.getElementById('btn').onclick = function () {// 动态引入 -> 实现按需加载// 即使只被引用了一次,也会代码分割import('./count.js').then(({ count }) => {alert(count(1, 4));});
};
const path = require('path'),HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src/index.html'),filename: 'index.html'})],optimization: {splitChunks: {chunks: 'all', // 对所有模块都进行分割}}
};
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 class="title">hello webpack5</h1><button id="btn">按钮</button>
</body>
</html>

给模块重命名

// index.js
document.getElementById('btn').onclick = function () {// 动态引入 -> 实现按需加载// 即使只被引用了一次,也会代码分割// 通过注释 webpackChunkName 命名import(/* webpackChunkName: 'math' */'./count.js').then(({ count }) => {alert(count(1, 4));});
};
  • chunkFilename 使用 [name] (对应 webpackChunkName
const path = require('path'),HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.[name].js',chunkFilename: 'chunk/[name].chunk.js', // 给打包输出的其他文件命名},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src/index.html'),filename: 'index.html'})],optimization: {splitChunks: {chunks: 'all', // 对所有模块都进行分割}}
};

Preload / Prefetch

使用 code split 可以做代码分割,同时会使用 import 动态导入的语法来进行代码按需加载(懒加载)。但是加载速度还不够好,比如,用户是点击那个按钮才下载资源的,如果资源体积较大,那么用户会感觉到明显的卡顿效果。
我们想在浏览器空闲时间,加载后续需要使用的资源,就需要用上 PreloadPrefetch 技术。

  • Preload:告诉浏览器立即加载资源

  • Prefetch:告诉浏览器在空闲时才开始加载资源

  • Preload加载优先级高,Prefetch优先级低;

  • Preload只加载当前页面需要使用的资源,Prefetch可以加载当前页面资源,也可以下载一个页面需要使用的资源。

  • 都会加载资源,并不执行;都有缓存;兼容性比较差。

安装 @vue/preload-webpack-plugin

yarn add @vue/preload-webpack-plugin -D
const path = require('path'),HtmlWebpackPlugin = require('html-webpack-plugin'),PreloadPlugin = require('@vue/preload-webpack-plugin'); module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.[name].js',chunkFilename: 'chunk/[name].chunk.js', // 给打包输出的其他文件命名},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src/index.html'),filename: 'index.html'}),// new PreloadPlugin({//     rel: 'prefetch'// }),new PreloadPlugin({rel: 'preload',as: 'script'})],optimization: {splitChunks: {chunks: 'all', // 对所有模块都进行分割}}
};

文件资源缓存

当缓存的资源发生变化时,希望重新加载这个资源;当有一个文件发生变化,只让这一个文件的缓存失效,不影响其他文件缓存。

hash

  • 给打包好的文件名添加哈希值,哈希值不变就不会重新打包。

存在问题:因为 jscss 同时使用一个hash值,如果修改了js,重新打包,会导致所有缓存失效,css 也会重新打包。

// 给文件名添加hashmodule.exports = {output: { path: path.resolve(__dirname, '/build'),// 输出文件带 8 位哈希值,每次重新打包都会生成一个唯一的 hash 值filename: 'js/built.[hash:8].js'}
};

chunkhash

  • 根据chunk生成hash值,如果打包来源于同一个chunk,那么hash值一样。

存在问题:jscsshash值还是一样的。因为css是在js中被引入的,所以同属一个chunk

contenthash

  • contenthash 是根据文件的内容生成 hash 值,不同文件 hash 值一定不一样。

存在问题:如果 index.js 引入了 count.js,打包出来的 index.bundle.jscount.chunk.js,如果 修改了 count.js 的内容,那么 index.js 的缓存也会失效。

module.exports = {output: { path: path.resolve(__dirname, '/build'),// 输出文件带 10 位哈希值,每次重新打包都会生成一个唯一的 hash 值filename: 'js/built.[contenthash:10].js',chunkFilename: 'js/chunk/[name].[contenthash:8].chunk.js', // 给打包输出的其他文件命名}
};

runtime

使用 runtime 就可以避免 contenthash 的问题。

  • runtimeChunk:它会把文件之间依赖的 hash 值,单独提取出来打包成一个文件去保管。
  • A 引用 BB 发生变化,只有 Bruntime会发生变化,不会影响到 A
const path = require('path'),HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[contenthash:8].bundle.js',chunkFilename: 'js/chunk/[name].[contenthash:8].chunk.js', // 给打包输出的其他文件命名clean: true},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src/index.html'),filename: 'index.html'})],optimization: {splitChunks: {chunks: 'all', // 对所有模块都进行分割},// 把文件之间依赖的 `hash` 值,单独提取出来打包成一个文件去保管runtimeChunk: {name: entrypoint => `runtime-${entrypoint.name}.js`}}
};

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

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

相关文章

外呼机器人有什么优势?

外呼机器人有什么优势&#xff1f;值得受到大多数电销企业的追捧&#xff01; 1、电话外呼效率高&#xff1a; 每天可拨打的电话数量是人工的5-10倍&#xff0c;人工一天只能拨打200-300通电话&#xff0c;机器人每天能打3000通电话以上&#xff0c;无须休息&#xff0c;按照…

Java-NIO篇章(4)——Reactor反应器模式

前面已经讲过了Java-NIO中的三大核心组件Selector、Channel、Buffer&#xff0c;现在组件我们回了&#xff0c;但是如何实现一个超级高并发的socket网络通信程序呢&#xff1f;假设&#xff0c;我们只有一台内存为32G的Intel-i710八核的机器&#xff0c;如何实现同时2万个客户端…

openGauss学习笔记-206 openGauss 数据库运维-常见故障定位案例-too many clients already

文章目录 openGauss学习笔记-206 openGauss 数据库运维-常见故障定位案例-too many clients already206.1 高并发报错“too many clients already”或无法创建线程206.1.1 问题现象206.1.2 原因分析206.1.3 处理办法 openGauss学习笔记-206 openGauss 数据库运维-常见故障定位案…

143基于matlab的2D平面桁架有限元分析

基于matlab的2D平面桁架有限元分析&#xff0c;可以改变材料参数&#xff0c;输出平面结构外形&#xff0c;各桁架应力&#xff0c;位移及作用力。可查看节点力&#xff0c;程序已调通&#xff0c;可直接运行。 143 matlab 平面桁架 有限元分析 桁架应力 (xiaohongshu.com)

element-ui 树形控件 通过点击某个节点,遍历获取上级的所有父节点和本身节点

1、需求&#xff1a;点击树形控件的某个节点&#xff0c;需要拿到它上级的所有父节点进行操作 2、代码&#xff1a; 树形控件代码 <el-tree:data"deptOptions"node-click"getVisitCheckedNodes"ref"target_tree_Speech"node-key"id&qu…

prometheus监控RabbitMQ策略

一般用官方的rabbitmq_exporter采取数据即可&#xff0c;然后在普米配置。但如果rabbitmq节点的队列数超过了5000&#xff0c;往往rabbitmq_exporter就会瘫痪&#xff0c;因为rabbitmq_exporter采集的信息太多&#xff0c;尤其是那些队列的细节&#xff0c;所以队列多了&#x…

ubuntu下docker卸载和重新安装

卸载&#xff1a;步骤一&#xff1a;停止Docker服务 首先&#xff0c;我们需要停止正在运行的Docker服务。打开终端&#xff0c;执行以下命令&#xff1a; sudo systemctl stop docker 步骤二&#xff1a;删除Docker安装包 接下来&#xff0c;我们需要删除已经安装的Docker软件…

2024年美赛数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…

[云访谈]熊娟:要把钟煲煲打造成万店级连锁品牌

导读 众所周知&#xff0c;疫情后期餐饮行业的挑战加剧&#xff0c;市场上流传着这样一句话&#xff1a;“餐饮倒闭率达到百分百”。这意味着&#xff0c;在一条街上&#xff0c;可能每个店铺每年都要更换一次老板。 从宏观角度来看&#xff0c;疫情确实对餐饮业造成了重创。…

【服务器GPT+MJ+GPTs】创建部署GPT+MJ+GPTs程序网站

目录 🌺【前言】 🌺【准备】 🌺【宝塔搭建GPT+MJ+GPTs】 🌼1. 给服务器添加端口 🌼2. 安装宝塔 🌼3. 安装Docker 🌼4. 安装ChatGPT程序 🌼5. 程序更新 🌼6. 修改端口 | 密码 🌼7. 绑定域名+申请SSL证书 🌺【前言】 相信大家都对openai的产品ch…

JSON-handle工具安装及使用

目录 介绍下载安装简单操作 介绍 JSON-Handle 是一款非常好用的用于操作json的浏览器插件&#xff0c;对于开发人员和测试人员来说是一款很好用的工具&#xff0c;如果你还没有用过&#xff0c;请赶紧下载安装吧&#xff0c;下面是安装过程和具体使用。 下载安装 点击下载JSON…

Flink:快速掌握批处理数据源的创建方法

Flink 社区最近 “基于FLIP-27” 设计了新的 Source 框架 。一些连接器&#xff08;API&#xff09;已迁移到这个新框架。本文介绍了如何使用这个新框架创建批处理源。 它是在为Cassandra实现Flink 批处理源时构建的。如果您有兴趣贡献或迁移连接器&#xff0c;这篇文章非常适合…

2017年认证杯SPSSPRO杯数学建模D题(第二阶段)教室的合理设计全过程文档及程序

2017年认证杯SPSSPRO杯数学建模 D题 教室的合理设计 原题再现&#xff1a; 某培训机构租用了一块如图&#xff08;见附件&#xff09;所示的场地&#xff0c;由于该机构开设了多种门类的课程&#xff0c;所以需要将这块场地通过加入一些隔墙来分割为多个独立的教室和活动区。…

sheng的学习笔记-神经网络

基础知识 基础知识-什么是分类问题 分类问题是根据已有数据&#xff0c;判断结果是正的还是负的&#xff08;1或者0&#xff09;,比如&#xff1a; • 根据肿瘤大小&#xff0c;判断肿瘤是良性的还是恶性的 • 根据客户交易行为&#xff0c;判断是否是恶意用户 • 根据邮件情况…

SAP EXCEL上传如何实现指定读取某一个sheet页(ALSM_EXCEL_TO_INTERNAL_TABLE)

如何读取指定的EXCEL sheet 页签&#xff0c;比如要读取下图中第二个输出sheet页签 具体实现方法如下&#xff1a; 拷贝标准的函数ALSM_EXCEL_TO_INTERNAL_TABLE封装成一个自定义函数ZCALSM_EXCEL_TO_INTERNAL_TABLE 在自定义函数导入参数页签新增一个参数SHEET_NAME 在源代码…

热门技术问答 | 请 GaussDB 用户查收

近年来&#xff0c;Navicat 与华为云 GaussDB 展开一系列技术合作&#xff0c;为 GaussDB 用户提供面向管理开发工具的生态工具。Navicat 现已完成 GaussDB 主备版&#xff08;单节点、多节点&#xff09;和分布式数据库的多项技术对接。Navicat 通过工具的流畅性和实用性&…

k8s 部署 Nginx 并代理到tomcat

一、已有信息 [rootmaster nginx]# kubectl get nodes -o wide [rootmaster nginx]# kubectl get svc NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 2…

jQuery遍历(树遍历)

1、.children&#xff08;&#xff09;: 获得匹配元素集合中每个元素的直接子元素&#xff0c;选择器选择性筛选。 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><script src"jQuery.js"&g…

《WebKit 技术内幕》学习之八(2):硬件加速机制

2 Chromium的硬件加速机制 2.1 GraphicsLayer的支持 GraphicsLayer对象是对一个渲染后端存储中某一层的抽象&#xff0c;同众多其他WebKit所定义的抽象类一样&#xff0c;在WebKit移植中&#xff0c;它还需要具体的实现类来支持该类所要提供的功能。为了完成这一功能&#x…

认识与探索大模型时代的RPA应用及进化(上)

AI Agent当前仍然处于技术爬坡与实验阶段&#xff0c;特别是在企业领域&#xff0c;真正的成熟应用还处于广泛探索与原型验证阶段&#xff0c;离成熟还尚待时日。而同时另外一种在最近几年广受欢迎的自动化解决方案-RPA&#xff08;机器人流程自动化&#xff09;也在LLM时代不断…