webpack 基础应用 + 优化总结

文章目录

    • 概要
      • webpack 基础内容
      • vue3 打包优化总结
      • vue3 打包优化实例案例展示
    • HMR
    • 小结
      • webpack`配置文件实例
      • 应用优化总结

概要

webpack 基础内容

  1. 概念
    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

  2. 核心概念

    • 入口(entry)：指定 webpack 从哪里开始构建依赖关系图。可以是一个或多个入口点，通常是 JavaScript 文件。例如在 webpack 配置中：
module.exports = {
    entry: './src/index.js'
};

- **输出(output)**：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。

module.exports = {
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};
  • 加载器(loader)：webpack 只能理解 JavaScript 和 JSON 文件。加载器用于将其他类型的文件（如 CSS、图片、字体等）转换为 webpack 能够处理的有效模块。例如，使用 css - loader 和 style - loader 来处理 CSS 文件：
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};
  • 插件(plugin)：用于执行范围更广的任务，比如打包优化、资源管理和注入环境变量等。例如，使用 HtmlWebpackPlugin 来自动生成 HTML 文件并引入打包后的 JavaScript 文件：
const HtmlWebpackPlugin = require('html - webpack - plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};
  1. 模块(module)
    在 webpack 中，一切皆模块。一个模块可以是一个 JavaScript 文件、CSS 文件、图片文件等。每个模块都有自己的依赖关系，webpack 会根据这些依赖关系来构建整个应用的依赖图。

vue3 打包优化总结

  1. 优化目标
    减少打包后的文件体积、提高加载速度和运行性能。

  2. 优化方法

    • 代码分割(Code Splitting)
      • 使用动态导入(dynamic import)，在 Vue 3 中，可以通过 import() 函数来实现。例如，对于一些只在特定条件下使用的组件，可以采用动态导入的方式，这样在初始加载时不会包含这些组件的代码。
// 异步加载组件
const AsyncComponent = () => import('./AsyncComponent.vue');
  • 利用 Vue 3 的异步组件 API，如 defineAsyncComponent，它可以更好地控制组件的加载和错误处理。
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));
  • 优化依赖树
    - 尽量减少不必要的依赖安装。查看项目中使用的第三方库，删除那些没有实际使用的库。
    - 对于一些大型的第三方库，如果只使用了其中的部分功能，可以考虑使用更轻量级的替代方案或者进行针对性的引入（如果库支持的话）。
    • 压缩和优化输出
      • 使用 webpack 的生产模式（mode: 'production'），它会自动启用一些优化，如代码压缩。
      • 配置 optimization 选项，例如，可以设置 minimize: true 来确保代码被压缩，还可以配置 splitChunks 来进一步分割代码块，避免将所有代码打包到一个大的 bundle 中。
module.exports = {
    mode: 'production',
    optimization: {
        minimize: true,
        splitChunks: {
            chunks: 'all'
        }
    }
};
  • 图片和资源优化
    - 对于图片资源，可以使用合适的加载器来进行压缩。例如，使用 image - webpack - loader 可以在打包过程中对图片进行压缩。
    - 使用合适的格式，如对于一些小图标可以使用 SVG 格式，它在加载和渲染上有更好的性能。
    • 去除不必要的 Vue 特性
      如果项目中没有使用 Vue 的某些特性（如过渡效果、指令等），可以通过构建工具的配置或者 Vue 的自定义构建来去除这些不必要的代码，减少最终的打包体积。

vue3 打包优化实例案例展示

案例场景：假设我们有一个 Vue 3 项目，包含多个页面和组件，使用了一些第三方库，并且有较多的图片资源。

  1. 初始情况分析
    在初始构建后，发现打包后的文件体积较大，加载时间较长。经过分析，发现部分第三方库有很多未使用的功能，同时图片资源没有进行优化，而且一些组件的加载没有进行合理的分割。

  2. 优化步骤及效果

    • 代码分割
      • 对于一些只在特定页面使用的组件，采用了动态导入的方式。例如，有一个只在用户登录后才显示的设置页面组件，修改代码如下：
// 原代码
import SettingsComponent from './SettingsComponent.vue';

// 修改为
const SettingsComponent = () => import('./SettingsComponent.vue');
  • 经过此优化，初始加载的 bundle 体积明显减小，主页面的加载速度提高了约 30%。
    • 优化依赖树
      • 检查项目中的第三方库，发现 moment 库被完全引入，但实际上只使用了日期格式化功能。将其替换为 dayjs，这是一个更轻量级的日期处理库。同时，删除了一些没有使用的其他第三方库。
      • 这一步使得打包后的整体体积减少了约 20%。
    • 压缩和优化输出
      • 在 webpack 配置中，确保 mode 设置为 production，并进一步配置 optimization 选项：
module.exports = {
    mode: 'production',
    optimization: {
        minimize: true,
        splitChunks: {
            chunks: 'all',
            minSize: 20000,
            minRemainingSize: 0,
            minChunks: 1,
            maxAsyncRequests: 30,
            maxInitialRequests: 30,
            enforceSizeThreshold: 50000,
            cacheGroups: {
                defaultVendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    }
};
  • 通过这些优化，代码的压缩效果更好，进一步减少了 bundle 的大小，并且由于代码块的合理分割，加载时的资源并行加载效率提高。
    • 图片和资源优化
      • 安装并配置 image-webpack-loader，在 webpack 配置的 module 规则中添加对图片的处理：
module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            // 其他图片格式的优化选项
                        }
                    }
                ]
            }
        ]
    }
};
  • 将一些小图标从 PNG 格式转换为 SVG 格式。这些优化措施使得图片资源的加载时间减少了约 40%。
    • 去除不必要的 Vue 特性
      通过分析项目，发现没有使用 Vue 的过渡效果。在构建时，通过自定义 Vue 构建（使用 @vue/builder-utils 等相关工具）来去除过渡相关的代码，进一步减少了打包体积。经过一系列优化后，整个项目的加载速度和性能得到了显著提升，用户体验得到了改善。

HMR

  1. 什么是HMR（热模块替换）？

    • HMR（Hot Module Replacement）是一种技术，它允许在运行时更新模块，而无需进行完整的页面刷新。这对于开发过程中快速查看代码更改的效果非常有用，能够显著提高开发效率。例如，当你修改了一个CSS样式或者一个JavaScript函数时，通过HMR可以在浏览器中即时看到变化，而不需要重新加载整个页面，这样可以保留当前的应用状态。

  2. 在webpack中配置HMR的基本步骤

    • 安装必要的插件和依赖（如果需要）
      • 对于大多数基于webpack的项目，webpack-dev-server是实现HMR的关键。如果还没有安装，使用以下命令安装：
        npm install webpack-dev-server --save - dev
    • 配置webpack.config.js文件
      • 基础配置修改
        • 在webpack.config.js的devServer选项中开启HMR。例如：
        const path = require('path');
module.exports = {
  //...其他配置
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    hot: true,//开启HMR
    port: 9000
  },
  //...其他配置
};
        • 这里contentBase指定了服务器从哪里提供内容，hot: true则是开启HMR的关键设置，port是服务器运行的端口号。
      • 模块热替换插件配置（如果是JavaScript模块）
        • 对于JavaScript模块，还需要在plugins部分添加webpack.HotModuleReplacementPlugin。
        const webpack = require('webpack');
const path = require('path');
module.exports = {
  //...其他配置
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    hot: true,
    port: 9000
  },
  //...其他配置
};
      • 处理CSS模块（以style - loader为例）
        • 当修改CSS文件时，为了让HMR能够正确处理CSS模块，在CSS加载器（style-loader和css-loader）的配置中需要添加特定的选项。
        module.exports = {
  //...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style - loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: false
            }
          }
        ]
      }
    ]
  },
  //...其他配置
};
        • 对于style-loader，它本身就支持HMR。在css-loader的配置中，importLoaders指定了在@import的CSS文件中应用多少个加载器，modules设置为false表示不使用CSS模块（如果你的项目不需要的话）。

  3. 在代码中使用HMR（以JavaScript模块为例）

    • 当一个模块被更新时，你需要在模块中编写一些代码来处理更新。例如，在一个JavaScript模块中：
    if (module.hot) {
  module.hot.accept('./anotherModule.js', function() {
    // 当`./anotherModule.js`模块更新时，这里的代码会执行
    console.log('Another module has been updated.');
  });
}
    • 这里module.hot.accept用于监听指定模块的更新。当./anotherModule.js模块被更新时，回调函数中的代码会被执行，你可以在这个回调函数中执行一些操作来更新应用的状态，比如重新渲染组件等。

  4. 注意事项

    • 兼容性问题
      • HMR并不是在所有浏览器和环境中都能完美工作。一些旧版本的浏览器可能不支持某些HMR功能。在实际开发中，需要考虑到目标浏览器的兼容性。
    • 状态管理的复杂性
      • 当使用HMR更新模块时，应用的状态管理可能会变得复杂。如果模块中有状态相关的代码（如Vuex或Redux中的状态），需要小心处理状态的更新和持久化，以避免出现意外的行为。例如，在更新一个包含状态管理的模块后，可能需要重新初始化或者合并状态，以确保应用的正常运行。

小结

webpack`配置文件实例

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 模块处理规则
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // 开发服务器配置（用于开发环境）
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  // 插件配置
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

应用优化总结

  1. 代码分割优化
    • 动态导入：对于大型项目，可以使用动态导入来分割代码。例如，如果有一些仅在特定用户操作或页面中才需要的模块，可以使用import()语法。假设在一个电商应用中，有一个复杂的订单管理模块，仅在用户进入订单页面时才需要加载。
const loadOrderModule = () => import('./orderModule.js');

这样，在初始加载时不会加载订单模块的代码，减小了初始包的大小。
- SplitChunks 插件：在webpack配置的optimization部分配置splitChunks。它可以自动将公共模块和第三方库提取到单独的文件中，避免重复打包。

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

例如，多个页面都使用了lodash库，通过splitChunks，lodash会被提取到一个单独的文件中，多个页面可以共享这个文件，减少了总的打包体积。

  1. 优化加载器（Loader）
    • 缓存加载器结果：对于一些计算成本高的加载器（如babel - loader），可以启用缓存。在babel - loader的配置中添加cacheDirectory: true。这样，在重复构建时，如果模块没有变化，就可以直接使用缓存结果，加快构建速度。
{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
      cacheDirectory: true
    }
  }
}
  • 优化图片加载器：如果项目中有大量图片，可以使用image - webpack - loader对图片进行压缩和优化。同时，根据图片的类型和使用场景选择合适的加载器和输出格式。例如，对于小图标可以使用url - loader将其转换为 base64 编码嵌入到 JavaScript 或 CSS 文件中，减少额外的网络请求。
{
  test: /\.(png|jpg|jpeg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192, // 小于8kb的图片转换为base64
        name: 'images/[name].[ext]'
      }
    },
    'image-webpack-loader'
  ]
}
  1. 优化插件（Plugin）使用
    • 压缩插件：在生产环境中，使用terse - webpack - plugin等压缩插件来压缩 JavaScript 代码。这可以显著减小打包后的文件大小，提高加载速度。
const TerserPlugin = require('terse-webpack-plugin');

module.exports = {
  //...其他配置
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
  }
};
  • 去除无用代码：使用webpack - bundle - analyzer插件可以分析打包后的文件，查看哪些模块占用了大量空间，是否有未使用的代码。如果发现有未使用的第三方库或代码，可以将其移除或优化。例如，通过分析发现项目中引入了一个完整的 UI 库，但只使用了其中几个组件，那么可以考虑只引入需要的组件，减少打包体积。
  1. 优化开发环境和生产环境配置差异
    • 开发环境注重速度和调试便利性：在开发环境中，开启source - map可以方便调试。同时，可以使用eval - source - map模式，它在构建速度和调试便利性之间有较好的平衡。例如：
devtool: 'eval-source-map'
  • 生产环境注重性能和文件大小：在生产环境中，除了上述提到的压缩代码、优化图片等操作，还可以设置mode: 'production'，webpack会自动启用一些优化，如代码压缩、去除调试信息等。同时，可以关闭一些不必要的开发相关的功能，如devServer等。
module.exports = {
  mode: 'production',
  //...其他生产环境特定配置
};

module.exports = {
  mode: 'development',
  //...其他开发环境特定配置
};

这样可以根据不同的环境需求，有针对性地优化webpack配置，提高开发效率和应用性能。

  1. 优化模块解析路径
    • 配置resolve选项：在webpack配置中，可以通过resolve选项来优化模块的解析路径。例如，可以设置alias来简化模块的引用路径。假设项目中有一个src目录，里面有很多子目录和模块，可以设置alias如下：
resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

这样，在代码中可以使用import something from '@/path/to/module'来代替相对复杂的import something from '../../../path/to/module'，提高了代码的可读性和可维护性，同时在模块解析时也可能会更快。

{
  test: /\.js$/,
  include: [path.resolve(__dirname, 'src')], // 只处理src目录下的js文件
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

同时，通过include或exclude选项更精确地指定loader处理的文件范围，避免不必要的文件处理，提高构建效率。

{
  test: /\.js$/,
  exclude: /node_modules/, // 不处理node_modules目录下的文件
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

{
  test: /\.js$/,
  include: [path.resolve(__dirname, 'src')], // 只处理src目录下的js文件
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

这样可以避免处理node_modules中的大量文件（通常这些文件已经是编译好的），同时只处理项目中自己编写的源代码，提高加载器的处理效率。

{
  test: /\.(js|jsx)$/,
  include: [path.resolve(__dirname, 'src')],
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset - env', '@babel/preset - react']
      }
    }
  ]
}

如果是 React 项目，还可以这样配置babel - loader来同时处理js和jsx文件，确保正确的代码转换和优化。

{
  test: /\.(js|jsx)$/,
  include: [path.resolve(__dirname, 'src')],
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset - env', '@babel/preset - react'],
        plugins: ['react - hot - loader/babel']
      }
    }
  ]
}

并且可以添加react - hot - loader/babel插件来实现 React 组件的热更新，提高开发效率。

{
  test: /\.(scss|sass)$/,
  use: [
    'style - loader',
    'css - loader',
   'sass - loader'
  ]
}

对于样式文件（如scss或sass），合理配置加载器，确保样式的正确处理和应用，同时可以考虑添加postcss - loader来添加一些样式的后处理功能，如自动添加浏览器前缀等。

{
  test: /\.(scss|sass)$/,
  use: [
    'style - loader',
    'css - loader',
  'sass - loader',
    'postcss - loader'
  ]
}

{
  test: /\.(css)$/,
  use: [
    'style - loader',
    'css - loader',
    'postcss - loader'
  ]
}

对于普通css文件也可以添加postcss - loader，通过配置postcss.config.js文件来定义具体的后处理规则。

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

例如，在postcss.config.js中添加autoprefixer来自动为css样式添加浏览器前缀，提高样式的兼容性。

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: [
    'file - loader'
  ]
}

对于字体文件，使用file - loader进行处理，确保字体在项目中的正确加载和应用。

{
  test: /\.(svg)$/,
  use: [
    'file - loader'
  ]
}

对于svg文件，同样可以使用file - loader，或者根据具体情况使用svg - inline - loader等其他专门处理svg的加载器，比如如果要将svg内联到html或js文件中，可以使用svg - inline - loader。

{
  test: /\.(html)$/,
  use: [
    'html - loader'
  ]
}

对于html文件，如果需要在webpack中进行处理（如在js中导入html模板），可以使用html - loader。

{
  test: /\.(html)$/,
  use: [
    {
      loader: 'html - loader',
      options: {
        minimize: true
      }
    }
  ]
}

并且可以添加minimize选项来对html文件进行压缩，减少文件大小，提高加载速度。

{
  test: /\.(pug)$/,
  use: [
    'pug - loader'
  ]
}

如果项目中使用pug模板，可以使用pug - loader进行处理，将pug模板转换为html。

{
  test: /\.(jade)$/,
  use: [
    'jade - loader'
  ]
}

对于jade模板（pug的旧称），使用jade - loader进行处理，确保模板的正确转换和应用。

{
  test: /\.(xml)$/,
  use: [
    'xml - loader'
  ]
}

如果项目中有xml文件需要处理，可以使用xml - loader。

{
  test: /\.(json)$/,
  use: [
    'json - loader'
  ]
}

对于json文件，可以使用json - loader，不过在webpack 4及以上版本，json文件默认可以被处理，无需额外配置json - loader。

{
  test: /\.(yaml|yml)$/,
  use: [
    'yaml - loader'
  ]
}

如果项目中使用yaml或yml文件，可以使用yaml - loader进行处理。

{
  test: /\.(md)$/,
  use: [
    'markdown - loader'
  ]
}

对于markdown文件，如果需要在项目中处理（如将markdown文件渲染为html），可以使用markdown - loader。

{
  test: /\.(txt)$/,
  use: [
    'raw - loader'
  ]
}

对于txt文件，可以使用raw - loader将其内容作为字符串加载到js文件中。

{
  test: /\.(csv)$/,
  use: [
    'csv - loader'
  ]
}

如果项目中有csv文件需要处理，可以使用csv - loader。

{
  test: /\.(ts|tsx)$/,
  include: [path.resolve(__dirname, 'src')],
  use: [
    'ts - loader'
  ]
}

对于TypeScript项目，使用ts - loader来处理ts和tsx文件，确保TypeScript代码的正确编译和优化。

{
  test: /\.(ts|tsx)$/,
  include: [path.resolve(__dirname, 'src')],
  use: [
    {
      loader: 'ts - loader',
      options: {
        transpileOnly: true
      }
    }
  ]
}

并且可以添加transpileOnly选项，它可以加快ts - loader的处理速度，不过需要注意的是，这种模式下不会进行类型检查，所以可以在项目中另外配置tsc进行类型检查。

{
  test: /\.(glsl|vert|frag)$/,
  use: [
    'webpack - glsl - loader'
  ]
}

如果项目涉及到WebGL相关的glsl、vert、frag等文件，可以使用webpack - glsl - loader进行处理。

{
  test: /\.(wav|mp3|midi|ogg)$/,
  use: [
    'file - loader'
  ]
}

对于音频文件，可以使用file - loader进行处理，确保音频文件在项目中的正确加载和应用。

{
  test: /\.(mp4|webm|ogg)$/,
  use: [
    'file - loader'
  ]
}

对于视频文件，同样可以使用file - loader进行处理。

{
  test: /\.(webp)$/,
  use: [
    'file - loader'
  ]
}

对于webp格式的图像文件，使用file - loader进行处理。

{
  test: /\.(ico)$/,
  use: [
    'file - loader'
  ]
}

对于ico图标文件，使用file - loader进行处理。

{
  test: /\.(swf)$/,
  use: [
    'file - loader'
  ]
}

对于swf文件，可以使用file - loader进行处理。

{
  test: /\.(map)$/,
  use: [
    'file - loader'
  ]
}

对于map文件（如source - map文件），可以使用file - loader进行处理，不过需要注意根据具体情况决定是否需要在生产环境中包含这些文件，通常在生产环境中可以不包含source - map文件以减小文件大小。

{
  test: /\.(dat)$/,
  use: [
    'file - loader'
  ]
}

对于dat文件等其他特殊类型的文件，如果需要在项目中处理，可以根据文件的性质选择合适的加载器或自行编写加载器。

{
  test: /\.(node)$/,
  use: [
    'node - loader'
  ]
}

对于node模块文件（如果需要在webpack构建的前端项目中使用），可以使用node - loader进行处理，不过需要谨慎使用，因为node模块可能会引入一些与前端环境不兼容的代码。

{
  test: /\.(asar)$/,
  use: [
    'asar - loader'
  ]
}

如果项目涉及到asar文件（如在Electron应用中），可以使用asar - loader进行处理。

{
  test: /\.(asar.unpacked)$/,
  use: [
    'asar - unpacked - loader'
  ]
}

对于asar.unpacked文件（同样在Electron应用相关场景

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

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

相关文章

神经网络11-TFT模型的简单示例

神经网络11-TFT模型的简单示例

Temporal Fusion Transformer (TFT) 是一种用于时间序列预测的深度学习模型，它结合了Transformer架构的优点和专门为时间序列设计的一些优化技术。TFT尤其擅长处理多变量时间序列数据，并且能够捕捉到长期依赖关系，同时通过自注意力机制有效地…
阅读更多...
学习threejs，使用TWEEN插件实现动画

学习threejs，使用TWEEN插件实现动画

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.PLYLoader PLY模型加…
阅读更多...
世界坐标系、相机坐标系、图像物理坐标系、像素平面坐标系

世界坐标系、相机坐标系、图像物理坐标系、像素平面坐标系

坐标系及其转换在计算机视觉领域占据核心地位。理解如何从一个坐标系转换到另一个坐标系，不仅是理论上的需要，也是实际应用中不可或缺的技能。 一、世界坐标系的定义 世界坐标系是一个全局的坐标系统，用于定义场景中物体的位置。在这个坐标…
阅读更多...
03-axios常用的请求方法、axios错误处理

03-axios常用的请求方法、axios错误处理

欢迎来到“雪碧聊技术”CSDN博客！ 在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将…
阅读更多...
Redis/Codis性能瓶颈揭秘：网卡软中断的影响与优化

Redis/Codis性能瓶颈揭秘：网卡软中断的影响与优化

目录 现象回顾 问题剖析 现场分析 解决方案 总结与反思 1.调整中断亲和性（IRQ Affinity）： 2.RPS（Receive Packet Steering）和 RFS（Receive Flow Steering）： 近期，…
阅读更多...
openwebui使用

openwebui使用

文章目录 1、feature2、安装使用2.1 安装过程2.2 安装好后 1、feature 可以加载多个大模型 同时回复 模型问答: 使用vLLM框架部署模型，再使用Open WebUI直接进行模型问答 多模型支持: 多模型回复比对（Qwen2-72B-Instruct, llama3-70b-8192, mixtral-8x7…
阅读更多...
汽车资讯新引擎：Spring Boot技术领航

汽车资讯新引擎：Spring Boot技术领航

3系统分析 3.1可行性分析 通过对本汽车资讯网站实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本汽车资讯网站采用SSM框架，JAVA作为开发语言&#…
阅读更多...
应用系统开发（12) Zync中实现数字相敏检波

应用系统开发（12) Zync中实现数字相敏检波

在 Xilinx Zynq 系列（如 Zynq-7000 或 Zynq UltraScale+）中实现数字相敏检波（DSP，Digital Synchronous Detection）可以通过硬件（PL部分，FPGA逻辑）和软件（PS部分，ARM Cortex-A 处理器）的协同工作来实现。以下是一个详细的设计方法，包括基本原理和 Zynq 的实现步骤。…
阅读更多...
《译文》2024年11月数维杯国际大学生数学建模挑战赛题目

《译文》2024年11月数维杯国际大学生数学建模挑战赛题目

# 赛题正式发布 2024年第十届数维杯国际大学生数学建模挑战赛顺利开赛，竞赛开始时间为北京时间2024年11月15日09:00至北京时间2024年11月19日09:00，共计4天，竞赛题目正式发布，快来一起围观，你认为今年的哪个题目更具有…
阅读更多...
apk反编译修改教程系列-----apk应用反编译中AndroidManifest.xml详细代码释义解析 包含各种权限 代码含义【二】

apk反编译修改教程系列-----apk应用反编译中AndroidManifest.xml详细代码释义解析 包含各种权限 代码含义【二】

💝💝💝💝在上期博文中解析了一个常规apk中 AndroidManifest.xml的权限以及代码。应粉丝需求。这次解析一个权限较高的apk。这款apk是一个家长管控的应用。需求的各种权限较高。而且通过管控端可以设置控制端的app隐藏与否。 通过博文了解💝💝💝💝 1💝💝…
阅读更多...
【UGUI】背包的交互01（道具信息跟随鼠标+道具信息面板显示）

【UGUI】背包的交互01（道具信息跟随鼠标+道具信息面板显示）

详细程序逻辑过程 初始化物品栏： 在 Awake 方法中，通过标签找到提示框和信息面板。 循环生成10个背包格子，并为每个格子设置图标和名称。 为每个格子添加 UInterMaager232 脚本，以便处理交互事件。 关闭提示框和信息面板&#…
阅读更多...
Docker: ubuntu系统下Docker的安装

Docker: ubuntu系统下Docker的安装

安装依赖 操作系统版本 Ubuntu Kinetic 22.10Ubuntu Jammy 24.04 (LTS)Ubuntu Jammy 22.04 (LTS)Ubuntu Focal 20.04 (LTS)Ubuntu Bionic 18.04 (LTS) CPU架构支持 ARMx86_64 查看我们的系统版本信息 uname -a通过该命令查得cpu架构是x86_64的； cat /etc/*re…
阅读更多...
Nacos 配置中心变更利器：自定义标签灰度

Nacos 配置中心变更利器：自定义标签灰度

作者：柳遵飞 配置中心被广泛使用 配置中心是 Nacos 的核心功能之一，接入配置中心，可以实现不重启线上应用的情况下动态改变程序的运行期行为，在整个软件生命周期中，可以极大降低了软件构建及部署的成本，提…
阅读更多...
基于RK3568J多网口电力可信物联网关解决方案

基于RK3568J多网口电力可信物联网关解决方案

前言 随着工业物联网的普及和功能越来越强大，边缘计算网关应运而生。 边缘计算有效降低了云端服务器的负载、大大降低了带宽的占用，同时也为本地化的区域自治提供了便利条件。 边缘计算网关，完美地发挥了“边”与“端” 结合优势&#xff0c…
阅读更多...
无人机飞手入门指南

无人机飞手入门指南

无人机飞手入门指南旨在为初学者提供一份全面的学习路径和实践建议，帮助新手快速掌握无人机飞行技能并了解相关法规知识。以下是一份详细的入门指南： 一、了解无人机基础知识 1. 无人机构造：了解无人机的组成部分，如机身、螺旋桨…
阅读更多...
网络传输：网卡、IP、网关、子网掩码、MAC、ARP、路由器、NAT、交换机

网络传输：网卡、IP、网关、子网掩码、MAC、ARP、路由器、NAT、交换机

目录 网卡IP网络地址主机地址子网子网掩码网关默认网关 MACARPARP抓包分析 路由器NATNAPT 交换机 网卡 网卡(Network Interface Card，简称NIC)，也称网络适配器。 OSI模型： 1、网卡工作在OSI模型的最后两层，物理层和数据链路层。物…
阅读更多...
多账号登录管理器（淘宝、京东、拼多多等）

多账号登录管理器（淘宝、京东、拼多多等）

目录 下载安装与运行 解决什么问题 功能说明 目前支持的平台 功能演示 登录后能保持多久 下载安装与运行 下载、安装与运行 语雀 解决什么问题 多个账号的快捷登录与切换 功能说明 支持多个电商平台支持多个账号的登录保持支持快捷切换支持导入导出支持批量删除支持…
阅读更多...
你可以通过以下步骤找到并打开 **Visual Studio 开发者命令提示符**：

你可以通过以下步骤找到并打开 **Visual Studio 开发者命令提示符**：

你可以通过以下步骤找到并打开 Visual Studio 开发者命令提示符： 1. 通过开始菜单查找 打开 开始菜单（点击屏幕左下角的 Windows 图标）。在搜索框中输入 Developer Command Prompt。你应该看到以下几种选项（具体取决于你的 Visu…
阅读更多...
版本控制【Git Bash】【Gitee】

版本控制【Git Bash】【Gitee】

目录 一、什么是版本控制？ 二、版本控制的种类： 1、本地版本控制 2、集中版本控制 3、分布式版本控制 三、下载Git Bash 四、Git Bash 配置 五、Git Bash使用 1、切换目录：cd 2.查看当前文件路径：pwd 3.列出当前目录下文件…
阅读更多...
大数据-226 离线数仓 - Flume 优化配置 自定义拦截器 拦截原理 拦截器实现 Java

大数据-226 离线数仓 - Flume 优化配置 自定义拦截器 拦截原理 拦截器实现 Java

点一下关注吧！！！非常感谢！！持续更新！！！ Java篇开始了！ 目前开始更新 MyBatis，一起深入浅出！ 目前已经更新到了： Hadoop&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023