解锁webpack：对html、css、js及图片资源的抽离打包处理

面试被问到webpack，可别只知道说 HtmlWebpackPlugin 了哇。

前期准备

安装依赖

npm init -y
npm install webpack webpack-cli --save-dev

配置打包命令

// package.json
{"scripts": {// ... 其他配置信息"build": "webpack --mode production"}
}

基本配置

entry

通过entry指定项目打包时的入口文件，可以配置单入口或者多入口

  • 单入口文件
module.exports = {entry: './path/to/my/entry/file.js',
};
  • 多入口文件
module.exports = {entry: {index: './src/index.js',info: './src/information.js',},
};

output

通过output配置项目打包后的文件名以及文件的输出路径（位置）

  • filename：此选项决定了每个输出 bundle 的名称

    • 什么是bundle?

      根据入口文件，最后打包生成的、可以直接让浏览器解析的JS、CSS文件。

    • JS属于入口文件，那CSS为什么也可看作bundle？

      • 不对CSS做抽离，那CSS会被内联在JS中（必然算）；
      • 对CSS做抽离，但CSS也是通过JS去做处理的（算做样式bundle）；

    • html算不算？

      HTML文件从严格意义上讲不算做bundle，因为不包含直接打包的代码或资源；

      只是对打包好的资源做加载或展示；

    • CODE

      module.exports = {output: {// 为什么这样命名？方便应用浏览器的缓存机制filename: 'js/[name].[hash:8].js',}
}

        webpack官方：output->filename 

        webpack官方：缓存（输出哈希文件名）

  • path：打包时会将 bundle 写入到output.path选项指定的目录下

    • 官方给出：对应一个绝对路径，如何配置它的值？

      绝对路径不做解释，懂得都懂，不懂得自查；

      在node下提供了一个全局变量__dirname，表示的就是当前执行的脚本文件所在的绝对路径；

    • CODE

      module.exports = {output: {filename: 'js/[name].[hash:8].js',// 将打包后的资源输出到当前目录下的 dist 目录中path: path.resolve(__dirname, 'dist')}
}
  • assetModuleFilename：与output.filename相同，不过应用于Asset Modules（字体or图标）
    • 支持的占位符：[name],[file],[query],[ext],[hash]与[path]
      • name：原始文件名
      • file：完整文件名（带拓展名）
      • query：URL查询参数部分——图的大中小到底请求哪个？（x.png?size=large），得到的是问号及后面的部分；
      • ext：文件拓展名
      • hash：根据文件内容生成的哈希值｜区别与chunkhash和contenthash，是整个项目构建过程的哈希值，现在V5中叫fullhash。
      • path：文件的相对路径。
    • 同内容但更新了文件名？涉及到文件名及内容，避免延迟更新。
    • 注意：
      • 该配置项是全局的，全局优先级低于局部的；
      • 局部指的是后面通过asset系列方式对资源文件做解析时配置的generato.filename。
    • CODE
    module.exports = {output: {filename: 'js/[name].[hash:8].js',path: path.resolve(__dirname, 'dist'),// 将资源文件输出到 assets 目录下以hash码来命名assetModuleFilename: 'assets/[hash][ext]',}
}
  • clean：控制是否在生成文件之前清空打包输出目录
    • 布尔值true（清空）、false（不清空）
    • 或以对象形式配置，使用keep来设置保留某个目录下的文件
    • CODE
    module.exports = {output: {filename: 'js/[name].[hash:8].js',path: path.resolve(__dirname, 'dist'),assetModuleFilename: 'assets/[hash][ext]',clean:true}
}

optimization

优化：比如对代码进行压缩、分割代码、去除未使用的导出模块、去除空chunk等

  • minimize：告知 webpack 使用TerserPlugin或其它在optimization.minimizer定义的插件压缩 bundle；值为布尔类型。
    • CODE
    module.exports = {//...optimization: {minimize: true,},
};
  • minimizer：允许开发者通过提供一个或多个定制过的TerserPlugin实例，覆盖默认的代码压缩工具，通过去除文件的换行、空格、注释等字符来缩小文件体积。
    • teser-webpack-plugin
      • 该插件使用terser来压缩Javascript（terser也是一个第三方依赖）
      • 非内置，非webpack官方插件，需要安装使用
      • webpack官方：terser-webpack-plugin
      • CODE
      npm install terser-webpack-plugin --save-dev

      const TerserPlugin = require('terser-webpack-plugin');module.exports = {optimization: {minimize: true,// 为啥是数组？你就用一个吗？接受的类型就是数组类型minimizer: [new TerserPlugin()],},
};
    • css-minimizer-webpack-plugin
      • 该插件使用cssnano来压缩CSS（cssnano是一个第三方库）
      • webpack贡献，不过也需要安装使用
      • 注意：webpack只能识别处理Js文件，对CSS的压缩处理记得配置好它的加载器（下面说这个东西）。
      • webpack官方：css-minimizer-webpack-plugin
      •  CODE
      npm install css-minimizer-webpack-plugin --save-dev
## 安装加载器
npm install mini-css-extract-plugin --save-dev
      const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {// 当前的主角配置optimization: {minimize: true,minimizer: [new CssMinimizerPlugin(),],},module: {rules: [{test: /.s?css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},],},plugins: [new MiniCssExtractPlugin()],
};

加载器Loader

加载器在webpack这里有一个统称，叫loader，用于辅助webpack来加载非JS类型的文件，需要注意使用顺序。

webpack默认情况下只能处理Js文件，如果要处理其他文件，前提得让webpack能够加载其他文件，比如图片、CSS文件等。

配置在module>rules中，rules是一个对象数组，对于某类文件的解析及配置写在对象中，其中test指定某类文件，use指定所需的加载器们。

style-loader

  • style-loader：将 CSS 代码以<style>标签的形式插入到 HTML 文档的<head>部分。
    • 当 Webpack 处理 CSS 文件时，通常和css-loader一起使用，css-loader会把 CSS 文件转换为 JavaScript 模块，style-loader则会提取这个模块中的 CSS 代码，并动态地创建<style>标签将其插入到 HTML 页面中。
    • CODE
    module.exports = {module: {rules: [{test: /\.css$/i,use: ['style-loader'],},],},
};

css-loader

  • css-loader：解析CSS文件，css-loader会对@import和url()进行处理，就像 js 解析import/require()一样
    • 启用/禁用url/image-set函数进行处理。 如果设置为false，css-loader将不会解析url或者image-set中的任何路径。
    • webpack官方：css-loader
    • CODE
    module.exports = {module: {rules: [{test: /\.css$/i,use: ['style-loader',{loader:"css-loader",options:{url: true // 解析 CSS 中的 url()——处理背景图时需要}}],},],},
};

MiniCssExtractPlugin.loader

  • MiniCssExtractPlugin.loader：会将 CSS 代码提取出来，然后由MiniCssExtractPlugin插件将这些 CSS 代码合并到一个或多个独立的 CSS 文件中，最后在 HTML 文件中通过<link>标签引入这些独立的 CSS 文件。
    • 区别于style-loader：
      • 将CSS抽离成单独的文件，而不是以style形式插入html；
      • 将抽离出来的css文件以link方式引入到html中。
    • CODE
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {optimization: {minimize: true,minimizer: [new CssMinimizerPlugin(),],},module: {rules: [// 当前的主角配置{test: /.s?css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},],},// 对应插件plugins: [new MiniCssExtractPlugin()],
};

postcss-loader

  • postcss-loader：让 Webpack 能够使用 PostCSS 对 CSS 文件进行处理。
    • 注意：
      • postcss-loader和postcss不一样，一个是loader一个是插件工具（下面讲）。
      • 使用postcss-loader还要下载postcss，要么铺的路没人走。
      • webpack官方：postcss-loader
      npm install --save-dev postcss-loader postcss

html-loader

  • html-loader：解析HTML文件
    • 将HTML导出为字符串，还可以对html字符串进行压缩处理
    • CODE
    module.exports = {module: {rules: [{test: /\.html$/i,loader: 'html-loader',options: {// 开启压缩minimize: true,// 处理 HTML 中的资源引用sources: true, },},],},
};

html-withimg-loader

  • html-withimg-loader：基于html-loader进行拓展，解决一些问题。
    • 可以对图片资源的输出进行配置，base64或是图片文件；
    • 可处理通过include引入的子页面，子页面中的图片资源也会处理。

asset module

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

在 webpack 5 之前，通常使用：

  • file-loader将文件发送到输出目录
  • url-loader将文件作为 data URI 内联到 bundle 中
  • raw-loader将文件导入为字符串

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

  • asset/resource
    • 将资源文件发送到输出目录，并导出 URL（在代码中使用该资源时就会使用这个URL路径）。
    • 之前通过使用file-loader实现。
    • 对于较大的文件：图片或字体文件等，需要单独打包到输出目录，方便浏览器缓存管理。
    • CODE
    module.exports = {// ...其他配置~module: {rules: [{test: /\.(png|jpeg|jpg|gif)$/i,// 关键配置：仅匹配背景图路径（示例：src/css/imgs/ 目录）include: path.resolve(__dirname, 'src/css/imgs'),type: 'asset/resource',generator: {filename: 'bg-images/[name].[contenthash][ext]'}},{test: /\.(png|jpeg|jpg|gif)$/i,// 关键配置：排除背景图路径，匹配其他图片（示例：src/assets/images/ 目录）exclude: path.resolve(__dirname, 'src/css/imgs'),type: 'asset/resource',generator: {// 为什么这里没有用哈希编码命名？因为资源名称涉及网络动态设定。filename: 'images/[name][ext]'}}]}
};
  • asset/inline
    • 导出一个资源的 data URI，也就是会将资源转换为Base64编码的数据。
    • 之前通过使用url-loader实现。
    • 将文件内容直接做编码化处理，避免额外的http请求。
  • asset/source
    • 导出资源的源代码，也就是会将资源的内容以字符串的形式引入到JS模块中。
    • 之前通过使用raw-loader实现。
    • 譬如针对txt、md等文件。
  • asset
    • 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源体积限制实现。
    • 默认情况下：小于8KB会使用asset/inline，否则使用asset/resource；可以使用parser.dataUrlCondition来更改临界值。
    • 资源模块 | webpack 中文文档
    • CODE
    module.exports = {// ...其他配置module: {rules: [{test: /\.(png|jpg|jpeg|gif)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 4 * 1024 // 调整阈值为 4KB}},generator: {filename: 'images/[name].[contenthash][ext]'}}]}
};

其他

  • sass-loader：辅助webpack来加载sass文件。

    sass-loader | webpack 中文文档

  • less-loader：辅助webpack来加载less文件。

    less-loader | webpack 中文文档

插件

html-webpack-plugin

html-webpack-plugin：根据html模板文件来将打包后的资源自动注入进该模版文件中，最后生成HTML文件。

  • 自动化注入资源：在 Webpack 打包过程中，生成的 JavaScript 和 CSS 文件的文件名可能会包含哈希值，手动在 HTML 文件中更新这些引用会很繁琐。html-webpack-plugin可以自动完成这个任务，确保 HTML 文件引用的是最新的打包资源，以script或link引入相关资源。
  • 支持多页面应用：可以通过多次实例化该插件，为多页面应用的每个页面生成对应的 HTML 文件，并且为每个页面注入相应的资源。
  • 自定义模板：允许使用自定义的 HTML 模板，开发者可以在模板中使用 EJS 语法嵌入变量和逻辑，灵活控制生成的 HTML 内容。
  • chunks指定：多页面应用会有多个入口文件，每个页面可能需要不同的代码块，chunks可以为每个页面精确指定要引入哪些代码块。为什么一个html有引入多个css，但最后webpack知道在哪个html中关联哪几个css资源，哪些css属于html指定的chunks，那这些css最后就会link进html。
  • HtmlWebpackPlugin | webpack 中文文档
  • CODE
npm i html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {index: './src/js/index.js',detail: './src/js/info.js',},// ...其他配置plugins: [new HtmlWebpackPlugin({template: './public/index.html',filename: 'index.html',chunks: ['index'] // 只注入 index 代码块，也是因为这里的设置才让对应的css能够引入到html中，因为css属于chunk，chunk关联html}),new HtmlWebpackPlugin({template: './public/detail.html',filename: 'detail.html',chunks: ['detail'] // 只注入 detail 代码块})]
};

mini-css-extract-plugin

MiniCssExtractPlugin：为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并将CSS代码抽离到单独的文件中，而不会让CSS嵌入在Js中。

  • 官方建议同css-loader一起使用，哈哈要不然怎么处理css呢，净是没用的大实话
  • CODE
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {plugins: [new MiniCssExtractPlugin({filename: 'css/[name].[hash:8].css'})],module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, "css-loader"],},],},
};

css-minimizer-webpack-plugin

CssMinimizerPlugin：对每个CSS文件进行压缩处理。

  • 默认情况下只在生产环境下开启CSS压缩优化，如果想要在开发环境下也启用CSS优化，需要将optimization.minimize设置为true。
  • CODE
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {module: {rules: [{test: /.s?css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},],},optimization: {minimizer: [new CssMinimizerPlugin(),],},plugins: [new MiniCssExtractPlugin()],
};

postcss

postcss ：一个CSS处理引擎，需要结合postcss-loader来使用在webpack中，有autoprefixer、cssnano、postcss-preset-env等常用插件。

  • autoprefixer

    • 为解决浏览器兼容问题，为css相关样式添加前缀。

    • 需要安装postcss-loader、postcss、autoprefixer

      Autoprefixer CSS online

    • CODE

      npm i postcss-loader postcss autoprefixer -D
      const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader'],},],},
};
  • 注意：
    • 添加前缀也是根据指定的浏览器列表来添加的，而浏览器列表正是package.json中的browserslist；
    • 创建`postcss.config.js`文件，内部引入autoprefixer，或在webpack中直接设置对应的配置项；
    // package.json
{// 其他配置"browserslist": ["last 2 versions", "ie >= 8", "Chrome > 31", "> 1%"]
}
    // postcss.config.js
module.exports = {plugins: [require('autoprefixer')]
}

terser-webpack-plugin

TerserWebpackPlugin：虽然由社区成员维护的第三方包，基于terser来对Javascript进行压缩处理，在webpack中开箱即用，安装配置即可。

  • CODE
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {optimization: {minimize: true,minimizer: [new TerserPlugin()]}
}

补充问题

批量导入图片

// 自动导入 ../images 目录下所有扩展名为 .png、.jpg、.jpeg 或 .gif 的图片文件
require.context('../images', false, /\.(png|jpe?g|gif)$/)
// 由于这些图片可能在多个html中都会用到，所以可以创建一个入口文件写入该代码，配置在entry中，这样webpack就可以知道对这些图片做模块打包了。
  • '../images'：这是第一个参数，表示要搜索的目录路径。在这个例子中，Webpack 会从当前文件所在目录的上一级的images目录开始搜索符合条件的文件。
  • false：第二个参数是一个布尔值，用于指定是否要递归搜索子目录。false表示不进行递归搜索，即只在../images目录下查找文件，而不会深入到其子目录中。如果设置为true，则会递归搜索该目录下的所有子目录。
  • /.(png|jpe?g|gif)$/：第三个参数是一个正则表达式，用于筛选符合条件的文件。这个正则表达式表示只匹配扩展名为.png、.jpg、.jpeg或.gif的文件。

样式正常，报错找不到CSS

由于使用了html-webpack-plugin，可以自动对css和js文件通过link或script插入到html模板中，所以检查是否模板并非模版而是原始的html文件；或者html模板中有引入相对路径下的源码文件。

<!-- 删除以下行（插件会自动注入） -->
<!-- <link rel="stylesheet" href="./css/index.css"> -->
<!--  删除手动引入的 CSS 链接，HtmlWebpackPlugin 会自动注入正确的路径 -->

哈希缓存

文件哈希+浏览器缓存

譬如资源的304状态码，其实是由于浏览器中缓存了该资源，且本次请求的该资源同缓存的资源一致，没有变化，直接使用缓存的资源。

响应头中的ETag

就是处理文件读取的关键点，是服务器响应资源时返回的一个唯一标识符，用于标识资源的具体版本。它通常基于资源内容生成（如哈希值、文件大小、修改时间等），类似于文件的 “指纹”。

  • 浏览器再次请求同一资源时，会先检查本地缓存是否存在。若存在，会向服务器发送条件请求，通过If-None-Match头携带缓存中的Etag，询问服务器资源是否更新：

    • 若资源未更新：

      服务器返回304 Not Modified，告知浏览器可直接使用本地缓存，不返回资源内容，减少带宽消耗。

    • 若资源已更新：

      服务器返回新资源内容和新的Etag，浏览器更新缓存。

与 Cache-Control/Expires 的配合
  • Cache-Control：控制缓存的 “有效期”（如max-age=31536000表示缓存 1 年）。
  • Etag：在缓存过期后，作为精确验证手段，确保浏览器获取到最新资源。
    • 若Cache-Control未过期，浏览器直接使用缓存，不触发 Etag 验证；
    • 若Cache-Control过期，浏览器发送带If-None-Match的请求，通过 Etag 验证资源是否真的需要更新。
  • 若同时使用Last-Modified和Etag，服务器会优先验证Etag（If-None-Match优先级高于If-Modified-Since）。

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

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

相关文章

SpringBoot整合SSE，基于okhttp

SpringBoot整合SSE，基于okhttp

一、引入依赖 <dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.10.0</version> </dependency> <dependency><groupId>com.squareup.okhttp3</groupId><…
阅读更多...
【哈希表】1399. 统计最大组的数目

【哈希表】1399. 统计最大组的数目

1399. 统计最大组的数目 - 力扣&#xff08;LeetCode&#xff09; 给你一个整数 n 。请你先求出从 1 到 n 的每个整数 10 进制表示下的数位和&#xff08;每一位上的数字相加&#xff09;&#xff0c;然后把数位和相等的数字放到同一个组中。 请你统计每个组中的数字数目&…
阅读更多...
手动实现LinkedList

手动实现LinkedList

前言 大家好&#xff0c;我是Maybe。最近在学习数据结构中的链表&#xff0c;自己手动实现了一个LinkedList。我想与大家分享一下。 思维导图 代码部分 package Constant;public class constant {public static final String INDEX_IS_WRONG"输入的下标不合法"; }p…
阅读更多...
如何检查浏览器是否启用了WebGL2.0硬件加速

如何检查浏览器是否启用了WebGL2.0硬件加速

一：WebGL Inspector使用 打开 Chrome 或 Edge（推荐使用 Chromium 内核浏览器）。 安装插件： 👉 Spector.js on Chrome Web Store 安装完成后，在浏览器工具栏看到绿色的 S 图标 二：捕获 WebGL 渲染帧 打开你要分析的 Web3D 网站（比如 https://3dviewer.net）。 点击浏…
阅读更多...
“时间”，在数据处理中的真身——弼马温一般『无所不能』（DeepSeek）

“时间”，在数据处理中的真身——弼马温一般『无所不能』（DeepSeek）

电子表格时间处理真理&#xff1a;数值存储最瘦身&#xff0c;真身闯关通四海。 笔记模板由python脚本于2025-04-23 22:25:59创建&#xff0c;本篇笔记适合喜欢在电子表格中探求时间格式的coder翻阅。 【学习的细节是欢悦的历程】 博客的核心价值&#xff1a;在于输出思考与经验…
阅读更多...
AXOP39062: 25MHz轨到轨输入输出双通道运算放大器

AXOP39062: 25MHz轨到轨输入输出双通道运算放大器

AXOP39062是用于低压应用(1.5V~5.5V)的双通道运算放大器&#xff0c;具有轨到轨的输入输出工作范围&#xff0c;非常适合需要小尺寸、大容性负载驱动能力的低压应用。产品具有25MHz的增益带宽&#xff0c;具有优异的噪声性能和极低的失真度。 主要特性 轨到轨的输入输出范围低…
阅读更多...
基于大模型的胃食管反流病全周期预测与诊疗方案研究

基于大模型的胃食管反流病全周期预测与诊疗方案研究

目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 二、胃食管反流病概述 2.1 疾病定义与分类 2.2 流行病学特征 2.3 发病机制 三、大模型技术原理与应用基础 3.1 大模型简介 3.2 适用于胃食管反流病预测的大模型类型 3.3 数据收集与预处理 四、大模型在胃食…
阅读更多...
西门子S7-200SMART 控制Profinet闭环步进MD-4250-PN (1)电机及专栏介绍

西门子S7-200SMART 控制Profinet闭环步进MD-4250-PN (1)电机及专栏介绍

一、前言 本系列是我继 《西门子S7-1200PLC 控制步进电机 MD-4240-PN》系列专栏后&#xff0c;新开的一篇专栏。 系列的主题围绕 S7-200SMART Profinet闭环步进(MD-4250-PN) 触摸屏的硬件&#xff0c;预计作四篇文章&#xff0c;分别为&#xff1a;专栏介绍、硬件介绍、PLC…
阅读更多...
bedtools coverage 获取每个位置的测序深度

bedtools coverage 获取每个位置的测序深度

1.bedtools 文档 $ bedtools --version bedtools v2.31.1coverage Compute the coverage over defined intervals. Usage:bedtools coverage [OPTIONS] -a <FILE> \-b <FILE1, FILE2, ..., FILEN>(or):coverageBed [OPTIONS] -a <FILE> \-b <FILE1,…
阅读更多...
反向代理和DDNS的区别是什么？

反向代理和DDNS的区别是什么？

反向代理&#xff08;Reverse Proxy&#xff09;和动态域名解析&#xff08;DDNS&#xff0c;Dynamic Domain Name System&#xff09;是两种不同的网络技术&#xff0c;虽然它们都与外部访问内部服务相关&#xff0c;但解决的问题和应用场景完全不同。具体区别如下&#xff1a…
阅读更多...
缩放点积注意力

缩放点积注意力

Scaled Dot-Product Attention 论文地址 https://arxiv.org/pdf/1706.03762 注意力机制介绍 缩放点积注意力是Transformer模型的核心组件&#xff0c;用于计算序列中不同位置之间的关联程度。其核心思想是通过查询向量&#xff08;query&#xff09;和键向量&#xff08;key&am…
阅读更多...
可吸收聚合物：医疗科技与绿色未来的交汇点

可吸收聚合物：医疗科技与绿色未来的交汇点

可吸收聚合物&#xff08;Biodegradable Polymers&#xff09;作为生物医学工程的核心材料&#xff0c;正引领一场从“金属/塑料植入物”到“智能降解材料”的范式转移。根据QYResearch&#xff08;恒州博智&#xff09;预测&#xff0c;2031年全球可吸收聚合物市场销售额将突破…
阅读更多...
房地产项目绩效考核管理制度与绩效提升

房地产项目绩效考核管理制度与绩效提升

房地产项目绩效考核管理制度的核心目的是通过合理的绩效考核机制&#xff0c;提升项目的整体运作效率&#xff0c;并鼓励项目团队成员的积极性。该制度适用于所有房地产项目部工作人员&#xff0c;涵盖了项目经理和项目成员的考核。考核的主要内容包括项目经理和项目部成员的工…
阅读更多...
【算法笔记】动态规划基础（一）：dp思想、基础线性dp

【算法笔记】动态规划基础（一）：dp思想、基础线性dp

目录 前言动态规划的精髓什么叫“状态”动态规划的概念动态规划的三要素动态规划的框架无后效性dfs -> 记忆化搜索 -> dp暴力写法记忆化搜索写法记忆化搜索优化了什么&#xff1f;怎么转化成dp&#xff1f;dp写法 dp其实也是图论首先先说结论&#xff1a;状态DAG是怎样的…
阅读更多...
pytorch 51 GroundingDINO模型导出tensorrt并使用c++进行部署，53ms一张图

pytorch 51 GroundingDINO模型导出tensorrt并使用c++进行部署，53ms一张图

本专栏博客第49篇文章分享了将 GroundingDINO模型导出onnx并使用c++进行部署，并尝试将onnx模型转换为trt模型，fp16进行推理，可以发现推理速度提升了一倍。为此对GroundingDINO的trt推理进行调研，发现 在GroundingDINO-TensorRT-and-ONNX-Inference项目中分享了模型导出onnx…
阅读更多...
一个关于相对速度的假想的故事-6

一个关于相对速度的假想的故事-6

既然已经知道了速度是不能叠加的&#xff0c;同时也知道这个叠加是怎么做到的&#xff0c;那么&#xff0c;我们实际上就知道了光速的来源&#xff0c;也就是这里的虚数单位的来源&#xff1a; 而它的来源则是&#xff0c; 但这是两个速度的比率&#xff0c;而光速则是一个速度…
阅读更多...
深度学习激活函数与损失函数全解析：从Sigmoid到交叉熵的数学原理与实践应用

深度学习激活函数与损失函数全解析：从Sigmoid到交叉熵的数学原理与实践应用

目录 前言一、sigmoid 及导数求导二、tanh 三、ReLU 四、Leaky Relu五、 Prelu六、Softmax七、ELU八、极大似然估计与交叉熵损失函数8.1 极大似然估计与交叉熵损失函数算法理论8.1.1 伯努利分布8.1.2 二项分布8.1.3 极大似然估计总结 前言 书接上文 PaddlePaddle线性回归详解…
阅读更多...
Python内置函数---breakpoint()

Python内置函数---breakpoint()

用于在代码执行过程中动态设置断点&#xff0c;暂停程序并进入调试模式。 1. 基本语法与功能 breakpoint(*args, kwargs) - 参数&#xff1a;接受任意数量的位置参数和关键字参数&#xff0c;但通常无需传递&#xff08;默认调用pdb.set_trace()&#xff09;。 - 功能&#x…
阅读更多...
从零手写 RPC-version1

从零手写 RPC-version1

一、 前置知识 1. 反射 获取字节码的三种方式 Class.forName("全类名") &#xff08;全类名&#xff0c;即包名类名&#xff09;类名.class对象.getClass() (任意对象都可调用&#xff0c;因为该方法来自Object类&#xff09; 获取成员方法 Method getMethod(St…
阅读更多...
ARINC818协议(六)

ARINC818协议(六)

上图中&#xff0c;红色虚线上面为我们常用的simple mode简单模式&#xff0c;下面和上面的结合在一起&#xff0c;就形成了extended mode扩展模式。 ARINC818协议 container header容器头 ancillary data辅助数据 视频流 ADVB帧映射 FHCP传输协议 R_CTRL:路由控制routing ctr…
阅读更多...
最新文章

Copyright @ 2022~2023