webpack--压缩，代码的拆分，tree shinking

Terser

对代码进行压缩、丑化

const TerserPlugin = require("terser-webpack-plugin");
 optimization: {
minimize: true, //在开发环境下启用 CSS 优化
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            arguments: true,// 将函数中使用的argumens[index]转换成对应的形参名称
            unused: false,
          },
          mangle: true,
          keep_fnames: true,
        },
      }),
    ],
}

compress中的属性：
arrows: class 或者object中的函数，转换成箭头函数
arguments:将函数中使用的argumens[index]转换成对应的形参名称
dead_code:移除不可达的代码
mangle中的属性:
toplevel:默认是false,顶层作用域中的变量名称进行丑化
keep_classnames 默认是false,是否保持依赖的类的名称
keep_fnames:默认是false,是否保持原来的函数名称
在这里插入图片描述

css压缩

npm i css-minimizer-webpack-plugin -D

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 optimization: {
   new CssMinimizerPlugin({
        parallel: true,
      }),
}

代码拆分

脚本命令运行时可以携带参数

  "scripts": {
    "build": "npx webpack --config ./config/com.config.js --env production",
    "server": "npx webpack server --config ./config/com.config.js --env development",
    "ts-check": "tsc  --noEmit",
    "tc-check-watch": "tec --noEmit --watch"
  },

module.exports可以导出一个函数,这个函数可以接受环境变量env

const commonConfig ={}
// webpack允许导出一个函数
module.exports = function (env) {
  console.log(env);
  return commonConfig;
};

在这里插入图片描述
安装merge
npm i webpack-merge -D
com.config.js存放开发和生产环境都会用到的配置

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { DefinePlugin } = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { merge } = require("webpack-merge");
const devConfig = require("./dev.config");
const prodConfig = require("./prod.config");
const config = function (isProduct) {
  return {
    entry: {
      main: {
        import: "./src/main.js",
        dependOn: "shared",
      },
      index: {
        import: "./src/index.js",
        dependOn: "shared",
      },
      shared: "dayjs",
    },
    output: {
      filename: "[name]-bundle.js",
      path: path.resolve(__dirname, "../build"),
      clean: true,
      chunkFilename: "[name]-chunk.js", //对分包的文件命名
    },
    resolve: {
      extensions: [".js", ".json", ".jsx", ".tsx", ".ts"],
      alias: {
        "@": path.resolve(__dirname, "../src"),
      },
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            isProduct ? MiniCssExtractPlugin.loader : "style-loader",
            //"style-loader", 开发
            // MiniCssExtractPlugin.loader,//生产
            "css-loader",
            "postcss-loader",
          ],
        },
        {
          test: /\.scss$/,
          use: [
            isProduct ? MiniCssExtractPlugin.loader : "style-loader",
            "css-loader",
            "sass-loader",
          ],
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/,
          type: "asset",
          parser: {
            dataUrlCondition: {
              maxSize: 4 * 1024,
            },
          },
          generator: {
            filename: "img/[hash][ext]",
          },
        },
        {
          test: /\.jsx$/,
          use: "babel-loader",
        },
        {
          test: /\.ts$/,
          use: "babel-loader",
        },
        {
          test: /\.m?js$/,
          exclude: /node_modules/, //排除/node_modules/ 下的文件
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.ts$/,
          use: "babel-loader",
        },
      ],
    },
    plugins: [
      // new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: "webpack项目",
        template: "./src/index.html",
      }),
      new DefinePlugin({
        BASE_URL: "'./public'",
      }),
    ],
  };
};

module.exports = function (env) {
  const isProduct = env.production;
  let mergeConfig = isProduct ? prodConfig : devConfig;

  return merge(config(isProduct), mergeConfig);
};

dev.config.js 开发环境的配置

const path = require("path");
module.exports = {
  mode: "development",
  devServer: {
    hot: true,
    open: true,
    port: "7070",
    host: "127.0.0.1",
    compress: true,
    static: [
      //静态目录
      {
        directory: path.join(__dirname, "public"),
      },
      {
        directory: path.join(__dirname, "content"),
      },
    ],
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        pathRewrite: { "^/api": "" },
      },
    ],
  },
  performance: {
    //配置如何展示性能提示  例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。
    maxEntrypointSize: 50000000,
    maxAssetSize: 30000000,
  },
};

prod.config.js 生产环境的配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
  mode: "production",
  plugins: [
    // new CleanWebpackPlugin(),
    new CopyPlugin({
      //把public下的文件拷贝到build下的public下
      patterns: [{ from: "public", to: "public" }],
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name]_chunk.css",
    }),
  ],

  optimization: {
    chunkIds: "deterministic", //选择模块 id 时需要使用哪种算法
    usedExports: true, //去决定每个模块的到处内容是否被使用 ,生产环境下默认开启，与minimizer配合使用可以去除定义后没有使用的代码
    runtimeChunk: {
      name: "runtime", //运行时代码提取到单独的文件中的方式。这有助于避免在每个模块更改时导致运行时代码的变化，从而减少主要包的大小并提高缓存利用率。
    },
    //分包
    splitChunks: {
      chunks: "all",
      //
      maxSize: 20000,
      //将包拆成不小于minSize的包，如果打不到minSize，那么这个包就不会拆分（会被合并到其他包中）
      minSize: 10000,
      cacheGroups: {
        venders: {
          //匹配/node_modules/下的包   [\\/]  /node_modules和\node_modules 为了处理不同系统的问题
          // \\  第一个\是为了转意，有些字符有特殊含义
          test: /[\\/]node_modules[\\/]/,
          filename: "[id]_[contenthash:6]_vender.js",
        },
        foo: {
          test: /utils/,
          filename: "[id]_[contenthahs:6]_utils.js",
        },
      },
    },
    minimize: true, //在开发环境下启用 CSS 优化
    //代码丑化设置
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            arguments: true,
            unused: false,
          },
          mangle: true,
          keep_fnames: true,
        },
      }),
      new CssMinimizerPlugin({
        parallel: true,
      }),
    ],
  },
};

usedExports ，对js进行tree shinking

对代码中没有用到的代码做标记,配合Terser使用可以删除代码中没有用到的代码。

 optimization: {
    chunkIds: "deterministic", //选择模块 id 时需要使用哪种算法
    usedExports: true, //去决定每个模块的到处内容是否被使用 ,生产环境下默认开启，与minimizer配合使用可以去除定义后没有使用的代码
    runtimeChunk: {
      name: "runtime", //运行时代码提取到单独的文件中的方式。这有助于避免在每个模块更改时导致运行时代码的变化，从而减少主要包的大小并提高缓存利用率。
    },
    //分包
    splitChunks: {
      chunks: "all",
      //
      maxSize: 20000,
      //将包拆成不小于minSize的包，如果打不到minSize，那么这个包就不会拆分（会被合并到其他包中）
      minSize: 10000,
      cacheGroups: {
        venders: {
          //匹配/node_modules/下的包   [\\/]  /node_modules和\node_modules 为了处理不同系统的问题
          // \\  第一个\是为了转意，有些字符有特殊含义
          test: /[\\/]node_modules[\\/]/,
          filename: "[id]_[contenthash:6]_vender.js",
        },
        foo: {
          test: /utils/,
          filename: "[id]_[contenthahs:6]_utils.js",
        },
      },
    },
    minimize: true, //在开发环境下启用 CSS 优化
    //代码丑化设置
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            arguments: true,
            unused: false,
          },
          mangle: true,
          keep_fnames: true,
        },
      }),
      new CssMinimizerPlugin({
        parallel: true,
      }),
    ],
  },

对css进行tree shaking

npm i purgecss-webpack-plugin -D
npm i glob -D Node没有内置

没有用到的css文件不会被打包

const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const path = require("path");
const glob = require("glob");
  plugins: [
    // new CleanWebpackPlugin(),
    new CopyPlugin({
      //把public下的文件拷贝到build下的public下
      patterns: [{ from: "public", to: "public" }],
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name]_chunk.css",
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, {
        nodir: true,
      }), //src/xx/x  nodir:true,不是查找文件夹，而是文件
      safelist: function () {
        return {
          standard: ["aa",], //白名单
         // deep: [/^safelisted-deep-/],
         // greedy: [/^safelisted-greedy/],
        };
      },
    }),
  ],

在这里插入图片描述
PurgeCSSPlugin可以设置白名单 safelist，设置后无论使用还是没有使用都会被打包

 new PurgeCSSPlugin({
      paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, {
        nodir: true,
      }), //src/xx/x  nodir:true,不是查找文件夹，而是文件
      safelist: function () {
        return {
          standard: ["aa",], //白名单
         // deep: [/^safelisted-deep-/],
         // greedy: [/^safelisted-greedy/],
        };
      },
    }),

在这里插入图片描述

import(“…/css/index.css”)：这种方式使用了动态import，在运行时会动态地加载模块。

import"…/css/index.css"：这种方式是标准的静态import，在编译时会静态地确定模块的依赖关系。
在这里插入图片描述
MiniCssExtractPlugin的chunkFilename可以给异步导入的包命名

 new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name]_chunk.css",//异步导入的分包的css的名字
      ignoreOrder: true, // 忽略 CSS 中的顺序问题
    }),

在这里插入图片描述

Scope Hoisting

对作用域进行提升，使打包后的代码更小，运行更快。
Scope Hoisting可以将函数合并到一个模块中来运行。

生产环境下默认会开启，开发环境下需要手动打开。

 plugins: [
    // new CleanWebpackPlugin(),
    new CopyPlugin({
      //把public下的文件拷贝到build下的public下
      patterns: [{ from: "public", to: "public" }],
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
  ],

HTTP压缩

HTTP压缩是一种在传输过程中对HTTP,请求和响应数据进行压缩的技术，可以显著减小数据传输量，从而加快网页的加载速度，减少网络传输所消耗的带宽。

常用的HTTP压缩算法包括Gzip和Deflate。这些算法会压缩文本、脚本、样式表和其他支持压缩的文件格式，使它们在服务器端进行压缩后再在客户端进行解压缩，以加快数据传输速度。

HTTP压缩的流程:

  1. http的数据在服务器发送前就已经被压缩了(可以在webpack中完成)
  2. 兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式。
    在这里插入图片描述
  3. 服务器在浏览器支持的压缩格式下，直接返回对应压缩后的文件，并在响应头中告知浏览器。
    在这里插入图片描述

npm install compression-webpack-plugin -D

const webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
  plugins: [

    new webpack.optimize.ModuleConcatenationPlugin(),
    new CompressionPlugin(),
  ],

部分属性


  new CompressionPlugin({
     include:"",
     exclude:"",
     threshold:0,//大于多少kb就压缩
     minRatio:0.8，//代码压缩的最小比例
     test:/\.(css|js)$/i,
  }),

html压缩

HtmlWebpackPlugin 除了可以生成html模板外，还有其他配置可以对html进行压缩。

 plugins: [
      // new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: "webpack项目",
        template: "./src/index.html",
        minify:isProduct?{
          removeComments:true, //移除注释
          removeEmptyAttributes:true,//移除空属性，例如class定一个,但是没有值。
          removeRedundantAttributes:true,//移除默认属性，例如input的type 默认是text,设置后会移除type
          collapseWhitespace:true,//折叠空白字符
          minifyCSS:true ,//压缩内联样式的css
          minifyJS:{  //压缩script标签中的js
            mmangle:{
              topLevel:true
            }
          }
        }:false
      }),
      new DefinePlugin({
        BASE_URL: "'./public'",
      }),
    ],

打包时间的分析

npm i speed-measure-webpack-plugin -D

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smap = new SpeedMeasurePlugin();
smap.wrap(config)

打包后的文件分析

npm i webpack-bundle-analyzer -D

const {BundleAnalyzerPlugin} = require("webpack-bundle-analyzer");
 plugins: [
      // new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: "webpack项目",
        template: "./src/index.html",
        minify: isProduct
          ? {
              removeComments: true, //移除注释
              removeEmptyAttributes: true, //移除空属性，例如class定一个,但是没有值。
              removeRedundantAttributes: true, //移除默认属性，例如input的type 默认是text,设置后会移除type
              collapseWhitespace: true, //折叠空白字符
              minifyCSS: true, //压缩内联样式的css
              minifyJS: {
                //压缩script标签中的js
                mmangle: {
                  topLevel: true,
                },
              },
            }
          : false,
      }),
      new DefinePlugin({
        BASE_URL: "'./public'",
      }),
      new BundleAnalyzerPlugin(),
    ],

运行打包命令后会打开一个网页：
在这里插入图片描述

全部配置

com.config.js:

const path = require("path");
const { DefinePlugin } = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { merge } = require("webpack-merge");
const devConfig = require("./dev.config");
const prodConfig = require("./prod.config");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const {BundleAnalyzerPlugin} = require("webpack-bundle-analyzer");
const smap = new SpeedMeasurePlugin();
const config = function (isProduct) {
  return {
    entry: {
      main: {
        import: "./src/main.js",
        dependOn: "shared",
      },
      index: {
        import: "./src/index.js",
        dependOn: "shared",
      },
      shared: "dayjs",
    },
    output: {
      filename: "[name]-bundle.js",
      path: path.resolve(__dirname, "../build"),
      clean: true,
      chunkFilename: "[name]-chunk.js", //对分包的文件命名
    },
    resolve: {
      extensions: [".js", ".json", ".jsx", ".tsx", ".ts"],
      alias: {
        "@": path.resolve(__dirname, "../src"),
      },
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            isProduct ? MiniCssExtractPlugin.loader : "style-loader",
            //"style-loader", 开发
            // MiniCssExtractPlugin.loader,//生产
            "css-loader",
            "postcss-loader",
          ],
        },
        {
          test: /\.scss$/,
          use: [
            isProduct ? MiniCssExtractPlugin.loader : "style-loader",
            "css-loader",
            "sass-loader",
          ],
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/,
          type: "asset",
          parser: {
            dataUrlCondition: {
              maxSize: 4 * 1024,
            },
          },
          generator: {
            filename: "img/[hash][ext]",
          },
        },
        {
          test: /\.jsx$/,
          use: "babel-loader",
        },
        {
          test: /\.ts$/,
          use: "babel-loader",
        },
        {
          test: /\.m?js$/,
          exclude: /node_modules/, //排除/node_modules/ 下的文件
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.ts$/,
          use: "babel-loader",
        },
      ],
    },
    plugins: [
      // new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: "webpack项目",
        template: "./src/index.html",
        minify: isProduct
          ? {
              removeComments: true, //移除注释
              removeEmptyAttributes: true, //移除空属性，例如class定一个,但是没有值。
              removeRedundantAttributes: true, //移除默认属性，例如input的type 默认是text,设置后会移除type
              collapseWhitespace: true, //折叠空白字符
              minifyCSS: true, //压缩内联样式的css
              minifyJS: {
                //压缩script标签中的js
                mmangle: {
                  topLevel: true,
                },
              },
            }
          : false,
      }),
      new DefinePlugin({
        BASE_URL: "'./public'",
      }),
      new BundleAnalyzerPlugin(),
    ],
  };
};

module.exports = function (env) {
  const isProduct = env.production;
  let mergeConfig = isProduct ? prodConfig : devConfig;
  const myConfig = merge(config(isProduct), mergeConfig);
  return myConfig;
};

dev.config.js:

const path = require("path");

module.exports = {
  mode: "development",

  devServer: {
    hot: true,
    open: true,
    port: "7070",
    host: "127.0.0.1",
    compress: true,
    static: [
      //静态目录
      {
        directory: path.join(__dirname, "public"),
      },
      {
        directory: path.join(__dirname, "content"),
      },
    ],
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        pathRewrite: { "^/api": "" },
      },
    ],
  },
  performance: {
    //配置如何展示性能提示  例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。
    maxEntrypointSize: 50000000,
    maxAssetSize: 30000000,
  },
};

prod.config.js:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require("webpack");
const path = require("path");
const glob = require("glob");
module.exports = {
  mode: "production",
  plugins: [
    // new CleanWebpackPlugin(),
    new CopyPlugin({
      //把public下的文件拷贝到build下的public下
      patterns: [{ from: "public", to: "public" }],
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name]_chunk.css", //异步导入的分包的css的名字
      ignoreOrder: true, // 忽略 CSS 中的顺序问题
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, {
        nodir: true,
      }), //src/xx/x  nodir:true,不是查找文件夹，而是文件
      safelist: function () {
        return {
          standard: ["aa"], //白名单
          // deep: [/^safelisted-deep-/],
          // greedy: [/^safelisted-greedy/],
        };
      },
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new CompressionPlugin({}),
  ],

  optimization: {
    chunkIds: "deterministic", //选择模块 id 时需要使用哪种算法
    usedExports: true, //去决定每个模块的到处内容是否被使用 ,生产环境下默认开启，与minimizer配合使用可以去除定义后没有使用的代码
    runtimeChunk: {
      name: "runtime", //运行时代码提取到单独的文件中的方式。这有助于避免在每个模块更改时导致运行时代码的变化，从而减少主要包的大小并提高缓存利用率。
    },
    //分包
    splitChunks: {
      chunks: "all",
      //
      maxSize: 20000,
      //将包拆成不小于minSize的包，如果打不到minSize，那么这个包就不会拆分（会被合并到其他包中）
      minSize: 10000,
      cacheGroups: {
        venders: {
          //匹配/node_modules/下的包   [\\/]  /node_modules和\node_modules 为了处理不同系统的问题
          // \\  第一个\是为了转意，有些字符有特殊含义
          test: /[\\/]node_modules[\\/]/,
          filename: "[id]_[contenthash:6]_vender.js",
        },
        foo: {
          test: /utils/,
          filename: "[id]_[contenthahs:6]_utils.js",
        },
      },
    },
    minimize: true, //在开发环境下启用 CSS 优化
    //代码丑化设置
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            arguments: true,
            unused: false,
          },
          mangle: true,
          keep_fnames: true,
        },
      }),
      new CssMinimizerPlugin({
        parallel: true,
      }),
    ],
  },
};

package.json:


  "scripts": {
    "build": "npx webpack --config ./config/com.config.js --env production",
    "server": "npx webpack server --config ./config/com.config.js --env development",
    "ts-check": "tsc  --noEmit",
    "tc-check-watch": "tec --noEmit --watch",
  },

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Cursor是什么？基于ChatGPT代码编辑器的cursor如何使用？VS Code如何迁移到Cursor的步骤

Cursor是什么？基于ChatGPT代码编辑器的cursor如何使用？VS Code如何迁移到Cursor的步骤

Cursor是什么 Cursor 是一个基于 Visual Studio Code（VS Code）技术构建的高级代码编辑器，专为提高编程效率并更深度地整合 AI 功能而设计。它不仅继承了 VS Code 的强大功能和用户界面，还增加了专门针对 AI 支持的特色功能。 Cur…
阅读更多...
UE5 渲染性能优化 学习笔记

UE5 渲染性能优化 学习笔记

主要考虑三个点： 1、灯光 2、半透明物体 3、后处理 1、Game：CPU对游戏代码的处理工作 2、Draw：CPU为GPU准备数据所做的工作 3、GPU Time：就是GPU所渲染需要花的时间 UE5的命令行指令 里面说明了某个指令有什么用处 以及启动…
阅读更多...
英伟达SSD视觉算法分类代码解析

英伟达SSD视觉算法分类代码解析

一、官方原代码 #!/usr/bin/env python3 # # Copyright (c) 2020, NVIDIA CORPORATION. All rights reserved. # # Permission is hereby granted, free of charge, to any person obtaining a # copy of this software and associated documentation files (the "Softwa…
阅读更多...
【电路笔记】-电子放大器介绍

【电路笔记】-电子放大器介绍

电子放大器介绍 文章目录 电子放大器介绍1、概述2、四极表示法3、理想模型4、真实放大器的限制5、噪音考虑因素6、电子放大器的类型1、概述 放大器是一种电子模块，可放大电位信号（电压放大器）、强度信号（电流放大器）或两者（功率放大器）。 放大器由两个输入组成，分别是…
阅读更多...
开门预警系统技术规范（简化版）

开门预警系统技术规范（简化版）

开门预警系统技术规范（简化版） 1 系统概述2 预警区域3 预警目标4 功能需求5 功能条件6 显示需求7 指标需求1 系统概述 开门预警系统（DOW），在自车停止开门过程中，安装在车辆的传感器（如安装在车辆后保险杆两个角雷达）检测从自车后方接近的目标车（汽车、摩托车等）的相对…
阅读更多...
Django面试题

Django面试题

1. 什么是wsgi？ WSGI 是 “Web Server Gateway Interface” 的缩写，它是一种用于 Python Web 应用程序和 Web 服务器之间通信的标准接口。它定义了一组规则和约定，使 Web 服务器能够与任何符合 WSGI 规范的 Python Web 应用程序进行交互。 #…
阅读更多...
2024年中级会计报名失败原因汇总❗

2024年中级会计报名失败原因汇总❗

2024年中级会计报名失败原因汇总❗ ❌这四类考生不能报考24年中级⇩⇩⇩ 1️⃣不参加会计信息采集的同学 2️⃣未按规定完成继续教育的同学 3️⃣不符合会计工作年限要求的同学 4️⃣报名前未做好材料准备 需要准备有效期内身份证、本人学历或学位证书、户籍证或者居住证明、符…
阅读更多...
翻转链表-链表题

翻转链表-链表题

LCR 141. 训练计划 III - 力扣（LeetCode） 非递归 class Solution { public:ListNode* trainningPlan(ListNode* head) {if(head ! nullptr && head->next ! nullptr){ListNode* former nullptr;ListNode* mid head;ListNode* laster nul…
阅读更多...
C++ PDF转图片

C++ PDF转图片

C PDF转图片#include "include/fpdfview.h" #include <fstream> #include <include/core/SkImage.h>sk_sp<SkImage> pdfToImg(sk_sp<SkData> pdfData) {sk_sp<SkImage> img;FPDF_InitLibrary(nullptr);FPDF_DOCUMENT doc;FPDF_PAGE …
阅读更多...
Character Region Awareness for Text Detection论文学习

Character Region Awareness for Text Detection论文学习

​1.首先将模型在Synth80k数据集上训练 Synth80k数据集是合成数据集&#xff0c;里面标注是使用单个字符的标注的&#xff0c;也就是这篇文章作者想要的标注的样子&#xff0c;但是大多数数据集是成堆标注的&#xff0c;也就是每行或者一堆字体被整体标注出来&#xff0c;作者…
阅读更多...
人工智能ChatGPT的多种应用：提示词工程

人工智能ChatGPT的多种应用：提示词工程

简介 ChatGPT 的主要优点之一是它能够理解和响应自然语言输入。在日常生活中&#xff0c;沟通本来就是很重要的一门课程&#xff0c;沟通的过程中表达的越清晰&#xff0c;给到的信息越多&#xff0c;那么沟通就越顺畅。 和 ChatGPT 沟通也是同样的道理&#xff0c;如果想要 …
阅读更多...
33.星号三角阵（二）

33.星号三角阵（二）

上海市计算机学会竞赛平台 | YACSYACS 是由上海市计算机学会于2019年发起的活动，旨在激发青少年对学习人工智能与算法设计的热情与兴趣，提升青少年科学素养，引导青少年投身创新发现和科研实践活动。https://www.iai.sh.cn/problem/742 题目描述 给定一个整数 𝑛，输出一个…
阅读更多...
专属部署简介

专属部署简介

什么是专属部署 专属部署(也称为专用部署)是一种部署选择&#xff0c;它允许用户将数据和应用部署到自己的专用云基础架构中&#xff0c;而不是与其他租户共享基础架构。这种部署方式可以提供更高的安全性、控制力和性能优化&#xff0c;因为用户可以完全控制和管理自己的基础设…
阅读更多...
大众点评全国爱车店铺POI采集177万家-2024年5月底

大众点评全国爱车店铺POI采集177万家-2024年5月底

大众点评全国爱车店铺POI采集177万家-2024年5月底 店铺POI点位示例&#xff1a; 店铺id H69Y6l1Ixs2jLGg2 店铺名称 HEEJOO豪爵足道(伍家店) 十分制服务评分 7.7 十分制环境评分 7.7 十分制划算评分 7.7 人均价格 134 评价数量 2982 店铺地址 桔城路2号盛景商业广场1-3…
阅读更多...
46【Aseprite 作图】发光

46【Aseprite 作图】发光

1 通过“编辑 - 特效 - 卷积矩阵”&#xff0c;这次选择“7*7”&#xff0c;可以做出窗户的效果
阅读更多...
面试题：什么是线程的上下文切换？

面试题：什么是线程的上下文切换？

线程的上下文切换是指在操作系统中&#xff0c;CPU从执行一个线程的任务切换到执行另一个线程任务的过程。在现代操作系统中&#xff0c;为了实现多任务处理和充分利用CPU资源&#xff0c;会同时管理多个线程的执行。由于CPU在任意时刻只能执行一个线程&#xff0c;因此需要在这…
阅读更多...
【QT5】＜知识点＞ IMX6ULL开发板运行QT

【QT5】＜知识点＞ IMX6ULL开发板运行QT

目录 1. 安装交叉编译器 2. 命令行交叉编译QT项目 3. 运行该可执行程序 4. 开发板上运行UDP程序与Ubuntu通信 1. 安装交叉编译器 第一步&#xff1a;进入正点原子论坛找到IMX6ULL开发板的资料&#xff0c;下载“开发工具”&#xff0c;将“交叉编译工具”中的fsl-imx-x11-…
阅读更多...
讲透计算机网络知识(实战篇)01——计算机网络和协议

讲透计算机网络知识(实战篇)01——计算机网络和协议

一、计算机网络和协议 1、网络和互联网络 1.1 网络、互联网、Internet 用交换机、集线器连接在一起的计算机构成一个网络。 用路由器连接多个网络&#xff0c;形成互联网。 全球最大的互联网&#xff1a;Internet。 1.2 网络举例 家庭互联网 图中的无线拨号路由器既是路由…
阅读更多...
mysql和redis备份和恢复数据的笔记

mysql和redis备份和恢复数据的笔记

一、mysql的备份及恢复方法&#xff1a; 1.完全备份与恢复 1.1物理备份与恢复 物理备份又叫冷备份&#xff0c;需停止数据库服务&#xff0c;适合线下服务器 备份数据流程&#xff1a; 第一步:制作备份文件 systemctl stop mysqld #创建存放备份文件的目录 mkdir /bakdir …
阅读更多...
一夜之间，苹果杀死无数AI工具创业公司！GPT-4o深度整合进苹果

一夜之间，苹果杀死无数AI工具创业公司！GPT-4o深度整合进苹果

就在刚刚&#xff0c;苹果发布会WWDC2024官宣了一系列AI相关的重磅升级。 由于这一波AI升级攒的太大了&#xff0c;苹果甚至索性创造了一个新的概念——苹果智能&#xff08;Apple Intelligence&#xff09;。 如果你认为 苹果智能 Siri升级&#xff0c;那你就大错特错了。 …
阅读更多...
最新文章

Copyright @ 2022~2023