vue+webpack5（高級配置）

項目地址
基礎配置可查看文檔

    • 1、devtool 配置 (找到報錯位置)
    • 2、優化打包速度
    • 3、oneOf 每個文件只被一個loader處理
    • 4、 include/exclude 處理某些文件或者排除某些文件
    • 5、 cache 緩存 （提升后面幾次的打包速度）
    • 6、 多進程打包
    • 7、減少代碼體積 Tree Shaking
    • 8、壓縮圖片
    • 9、多入口
    • 10、 多入口想提取公共模塊，這個時候就用到了代碼分割
    • 11、chunk統一命名
    • 12、 Preload和Prefetch
    • 13、配置緩存，文件發生變化時，只有main 和runtime.js會重新打包，其他文件不變
    • 14、 core-js
    • 15、PWA

總結

我們從 4 個角度對 webpack 和代碼進行了優化:

  • 1.提升開發體驗
    。使用 sourceMap讓開發或上線時代碼報錯能有更加準確的錯誤提示。
  • 2.提升 webpack 提升打包構建速度
    。使用 HotmduleReplacement讓開發時只重新編譯打包更新變化了的代碼，不變的代碼使用緩存，從而使更新速度更快。
    。使用 one0f讓資源文件一旦被某個 loader 處理了，就不會繼續遍歷了，打包速度更快。
    。使用 Include/Exclude排除或只檢測某些文件，處理的文件更少，速度更快。
    。使用cache 對 eslint 和 babel 處理的結果進行緩存，讓第二次打包速度更快。
    。使用 Thead 多進程處理 esint和 babel 任務，速度更快。(需要注意的是，進程啟動通信都有開銷的，要在比較多代碼處理時使用才有效
    果)
  • 3.減少代碼體積
    。使用 Tree shaking剔除了沒有使用的多余代碼，讓代碼體積更小。
    。使用 @babel/plugin-transform-runtime 插件對 babel 進行處理，讓輔助代碼從中引入，而不是每個文件都生成輔助代碼，從而體積更小。。使用 image miniizer 對項目中圖片進行壓縮，體積更小，請求速度更快。(需要注意的是，如果項目中圖片都是在線鏈接，那么就不需要了。本地項目靜態圖片才需要進行壓縮。)
  • 4.優化代碼運行性能
    。使用 code split 對代碼進行分割成多個i5文件，從而便單個文件體積更小，并行加載is速度更快。并通過 import 動態導入語法進行按需加載，從而達到需要使用時才加載該資源，不用時不加載資源。
    使用 Preload/Prefetch,對代碼進行提前加載，等未來需要使用時就能直接使用，從而用戶體驗更好。使用 Network cache能對輸出資源文件進行更好的命名，將來好做緩存，從而用戶體驗更好。
    。便用 core-js 對js 進行兼容性處理，讓我們代碼能運行在低版本瀏覽器。
    。使用PA能讓代碼離線也能訪問，從而提升用戶體驗。

1、devtool 配置 (找到報錯位置)

SourceMap(源代碼映射)是一個用來生成源代碼與構建后代碼一一映射的文件的方案。它會生成一個 xx.map 文件，里面包含源代碼和構建后代碼每一行、每一列的映射關系。當構建后代碼出錯了，會通過 xxx.map 文件，從構建后代碼出錯位置找到映射后源代碼出錯位置，從而讓瀏覽器提示源代碼文件出錯位置，幫助我們更快的找到錯誤根源。
開發模式用

  devtool: 'cheap-module-source-map',
  • 優點:打包編譯速度快，只包含行映射
  • 缺點:沒有列映射
    生產模式用
devtool: 'source-map',
  • 優點:包含行/列映射
  • 缺點:打包編譯速度更慢
    build: slowest rebuild: slowest

2、優化打包速度（HMR）

HMR (HotModuleReplacement)，即熱模塊替換，是 webpack 的一個功能，它可以在運行時更新模塊，而無需完全刷新整個頁面。

  devServer: {...hot:true, // 提供HMR功能,只更新某個模塊，沒有替換整個項目},

在模塊中判斷

if(module.hot){module.hot.accept('./xxx')
}

實際開發并不需要上述這樣，直接配置loader，以vule為例 vue-loader，生產模式不需要

3、oneOf 每個文件只被一個loader處理

未配置時，一個loader解析之后，其他loader還要解析，配置oneOf之后，每個文件一個loader解析之后就不往下解析了

  module: {rules: [// oneOf 不支持 vue-loader ，要單獨拿出來{test: /\.vue$/,loader: "vue-loader",},// 每個文件只有一個loader配置處理{oneOf: [{test: /\.(gif|png|jpe?g)$/i,type: "asset",parser: {dataUrlCondition: {// 小于10kb的圖片轉成base64，減少請求數量// 缺點：體積會大一點maxSize: 10 * 1024, // 小于10kb},},generator: {// 輸出圖片的名稱filename: "imgs/[name].[contenthash:8][ext]",},},]}],},
  • 報錯 [VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneof
    解決方案：將vue-loader 移到配置外面，單獨拿出來

4、 include/exclude 處理某些文件或者排除某些文件

 module: {rules: [{test: /\.(js|ts|jsx|tsx)$/,include: path.resolve(__dirname, 'src'),// exclude: /node_modules/,// loader:"babel-loader",loader: 'esbuild-loader',generator: {target: 'es2015'}},]}

include和exclude的只寫一個即可

 plugins: [new ESLintPlugin({// 配置哪些目錄需要檢查context: path.resolve(__dirname, './src'),exclude: 'node_modules',// 不寫 默認也有}),]

5、 cache 緩存 （提升后面幾次的打包速度）

對eslint檢查和babel編譯進行緩存，提升打包速度，cacheDirectory 是否開啟緩存。

       {test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],cacheDirectory: true, // 開啟babel緩存cacheCompression: false,// 關閉緩存文件壓縮},},},

eslint 開啟緩存

    new ESLintPlugin({// 配置哪些目錄需要檢查context: path.resolve(__dirname, './src'),exclude: 'node_modules',// 不寫 默認也有cache: true,// 開啟緩存cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),}),

6、 多進程打包

const os = require('os');
const threads = os.cpus().length;
  • 下載 thread-loader
npm install thread-loader --D

在loader配置多進程

  const TerserWebpackPlugin = require("terser-webpack-plugin");
module.exports = {
...module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: [{loader: 'thread-loader',options: {workers: threads, // 開啟幾個子進程去完成}},{loader: 'babel-loader',options: {presets: ['@babel/preset-env'],cacheDirectory: true, // 開啟babel緩存cacheCompression: false,// 關閉緩存文件壓縮},},] },]}}

在eslint中開啟多進程

  new ESLintPlugin({// 配置哪些目錄需要檢查context: path.resolve(__dirname, './src'),cache: true,// 開啟緩存cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),threads,}),

引入壓縮的插件

const TerserWebpackPlugin = require("terser-webpack-plugin");

在plugins中配置

   new TerserWebpackPlugin({parallel: threads, // 開啟多進程extractComments: false, // 移除注釋terserOptions: {compress: {pure_funcs: ['console.log'], // 移除console.log},},}),

在optimization添加壓縮配置

  // 用于處理壓縮optimization: {...minimizer: [// CssMinimizerPlugin、TerserWebpackPlugin 也可以放在plugins中new CssMinimizerPlugin(),new TerserWebpackPlugin({parallel: threads, // 開啟多進程extractComments: false, // 移除注釋terserOptions: {compress: {pure_funcs: ['console.log'], // 移除console.log},},}),],},

7、減少代碼體積 Tree Shaking

減少babel體積
禁用babel自動對每個文件的runtime注入，@babel/plugin-transform-runtime 優化代碼轉換的運行時行為，通過復用輔助函數和減少全局污染來提升代碼質量

  • 下載
npm i @babel/plugin-transform-runtime --D

在babel中配置

          {test: /\.js$/,exclude: /node_modules/,use: [{loader: 'thread-loader',options: {workers: threads, // 開啟幾個子進程去完成}},{loader: 'babel-loader',options: {presets: ['@babel/preset-env'],cacheDirectory: true, // 開啟babel緩存cacheCompression: false,// 關閉緩存文件壓縮plugins: ['@babel/plugin-transform-runtime'],},},]},

8、壓縮圖片

下載包

npm i image-minimizer-webpack-plugin --D

無損壓縮(包下載不下來)

npm install imagemin-gifsicle  imagemin-jpegtran imagemin-optipng imagemin-svgo --D

有損壓縮

npm install imagemin-gifsicle imagemin-jpegtran imagemin-pngquant imagemin-svgo --D

包不好下

  optimization: {...minimizer: [...new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [['gifsicle', { interlaced: true }],['jpegtran', { progressive: true }],['optipng', { optimizationLevel: 5 }],['svgo',{plugins: ['preset-default',"prefixIds",{name: "sortAttrs",params: {xmlnsOrder: "alphabetical"}}]},],]}}})],},

9、多入口

const HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports ={// entry:'./src/main.js'，// 只有一個入口文件，單入口entry:{ // 有多個入口文件，多入口app:"./src/app.js"main:"./src/main.js"}output:{path: path.resolve( dirname,"dist"),filename: "[name].js"，// webpack命名方式，[name]以文件名自己命名filename }plugins:[new HtmlWebpackPlugin({template:path.resolve( dirname,"public/index.html")})],mode:"production"
}

10、 多入口想提取公共模塊，這個時候就用到了代碼分割

  optimization: {minimize: true, // 強制啟用壓縮// 對代碼進行分割splitChunks: {chunks: 'all',// 以下是默認值// minsize:20000，//分割代碼最小的大小// minRemainingsize:0，//類似于minsize，最后確保提取的文件大小不能為0// minChunks:1，//至少被引用的次數，滿足條件才會代碼分割// maxAsyncRequests:3e,/按需加載時并行加載的文件的最大數量// maxInitialRequests:30，//入口js文件最大并行請求數量// enforcesizeThreshold:50000,// 超過50kb一定會單獨打包(此時會忽略minRemainingsize、maxAsyncRequests、maxInitialRegquests)//cacheGroups:{// 組，哪些模塊要打包到一個組)// defaultVendors:{//組名// test:/[\V/]node_modules[\\/]/，//需要打包到一起的模塊// priority:-10，//權重(越大越高)//  reuseExistingchunk:true，//如果當前 chunk 包含已從主 bundle 中拆分出的模塊，則它將被重用，// 而不是生成新的模塊// },// default:{ // 其他沒有寫的配置會使用上面的默認值// {//   minChunks:2,//這里的minChunks權重更大//   priority: -20,//   reuseExistingchunk: true,// }},// runtimeChunk: 'single',minimizer: [new CssMinimizerPlugin(),]},

11、chunk統一命名

  output: {clean: true, // 清理 /dist 文件夾// filename: "js/main.js", // 打包后的文件名稱filename: "js/[name].[contenthash:8].js", // 打包后的文件名稱// 打包輸出的其他文件名稱chunkFilename: "js/[name].[contenthash:8].chunk.js",path: path.resolve(__dirname, "../dist"), // 打包后的目錄// 圖片 等字體通過type: asset處理資源命名方式assetModuleFilename: 'media/[name].[contenthash:8][ext][query]',},

  new MiniCssExtractPlugin({filename: "css/[name].[contenthash:8].css"}),

添加 移除loader中字體、媒體文件的命名規則

  // generator: {//   filename: "fonts/[name].[contenthash:8][ext][query]"// }

12、 Preload和Prefetch(兼容性差)

  • Preload :告訴瀏覽器立即加載資源。
  • Prefetch :告訴瀏覽器在空閑時才開始加載資源。
    它們共同點:
    。都只會加載資源，并不執行。
    。都有緩存。
    它們區別:
    Preload 加載優先級高，Prefetch 加載優先級低
    只能加載當前頁面需要使用的資源， Prefetch 可以加載當前頁面資源，也可以加載下一個頁面需要使用的資源。reloa
    總結:
    。當前頁面優先級高的資源用 Preload 加載。
    。下一個頁面需要使用的資源用Prefetch 加載
    它們的問題:兼容性較差，
    。我們可以去 CanlUseB 網站查詢 API 的兼容性問題Preload 相對于 Prefetch 兼容性好一點。

點擊查看兼容

13、配置緩存，文件發生變化時，只有main 和runtime.js會重新打包，其他文件不變

runtimeChunk:{name:(entrypoint)=>runtime~${entrypoint.name}.js`
}

14、 core-js

過去我們使用 babel 對js 代碼進行了兼容性處理，其中使用@babe/preset-env 智能預設來處理兼容性問題它能將 ES6 的一些語法進行編譯轉換，比如箭頭函數、點點點運算符等。但是如果是 async 函數、promise 對象、數組的一些方法(includes)等，它沒辦法處理
所以此時我們js 代碼仍然存在兼容性問題，一旦遇到低版本瀏覽器會直接報錯。所以我們想要將js 兼容性問題徹底解決
core-js 是專門用來做ES6 以及以上API的 polyfill。
polyfi11 翻譯過來叫做墊片/補丁。就是用社區上提供的一段代碼，讓我們在不兼容某些新特性的瀏覽器上，使用該新特性。
例如：Promise 就沒有被打包

return new Promise(resolve => {resolve("成功");});

解決方案：

  • 通過在代碼中按需引入core-js的Promise
  • 在babel.config.js中配置core-js
 module.exports = {presets: ['@babel/preset-env',{useBuiltIns: "usage", //按需加載自動引入corejs: 3,}]
};

15、PWA

開發 Web App 項目，項目一旦處于網絡離線情況，就沒法訪問了。我們希望給項目提供離線體驗。
漸進式網絡應用程序(progressiveweb application·PWA):是一種可以提供類似于 native app(原生應用程序) 體驗的 Web App 的技術。
其中最重要的是，在 離線(offline)時應用程序能夠繼續運行功能。內部通過 Service Workers 技術實現的。

  • 下載
npm install workbox-webpack-plugin --save-dev

npm run build
現在你可以看到，生成了兩個額外的文件：service-worker.js 和名稱冗長的 precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js。service-worker.js 是 Service Worker 文件，precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js 是 service-worker.js 引用的文件，所以它也可以運行。你本地生成的文件可能會有所不同，但是應該會有一個 service-worker.js 文件。

  • 注冊 Service Worker
 if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(registration => {console.log('SW registered: ', registration);}).catch(registrationError => {console.log('SW registration failed: ', registrationError);});});}

啟動會發現未成功，這個時候要安裝server
npm i server -g
啟動
sever dist
[具體可參考]（https://www.webpackjs.com/guides/progressive-web-application/#adding-workbox）

完整配置代碼

const chalk = require('chalk');
const path = require("path");
const os = require('os');
const threads = os.cpus().length;const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const { DefinePlugin } = require('webpack');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');// 用來處理獲取的樣式
function getStyleLoaders(pre) {return [MiniCssExtractPlugin.loader,"css-loader",{loader: "postcss-loader",options: {postcssOptions: {// plugins: [["autoprefixer"]],plugins: ['postcss-preset-env'],//能解決大多數兼容性問題},},}, pre].filter(Boolean);
}module.exports = {mode: "production", // 開發模式entry: path.resolve(__dirname, "../src/main.js"), // 入口文件 相對路徑// web serverdevtool: 'source-map',output: {clean: true, // 清理 /dist 文件夾// filename: "js/main.js", // 打包后的文件名稱filename: "js/[name].[contenthash:8].js", // 打包后的文件名稱path: path.resolve(__dirname, "../dist"), // 打包后的目錄// 圖片 等字體通過type: asset處理資源命名方式assetModuleFilename: 'media/[name].[contenthash:8][ext][query]',},cache: {type: 'filesystem',allowCollectingMemory: true,idleTimeout: 60000,compression: 'gzip',},// 用于處理壓縮optimization: {splitChunks: {chunks: 'all',},runtimeChunk: 'single',minimizer: [// CssMinimizerPlugin、TerserWebpackPlugin 也可以放在plugins中new CssMinimizerPlugin(),new TerserWebpackPlugin({parallel: threads, // 開啟多進程extractComments: false, // 移除注釋terserOptions: {compress: {pure_funcs: ['console.log'], // 移除console.log},},}),new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [['gifsicle', { interlaced: true }],['jpegtran', { progressive: true }],['optipng', { optimizationLevel: 5 }],['svgo',{plugins: ['preset-default',"prefixIds",{name: "sortAttrs",params: {xmlnsOrder: "alphabetical"}}]},],]}}})],},plugins: [new ESLintPlugin({// 配置哪些目錄需要檢查context: path.resolve(__dirname, './src'),cache: true,// 開啟緩存cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),threads,// 開啟多進程打包}),new ProgressBarPlugin({format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`}),new VueLoaderPlugin(),new HtmlWebpackPlugin({// 模版：以public/index.html為模板生成打包后的index.htmltemplate: path.resolve(__dirname, "../public/index.html"),BASE_URL: process.env.BASE_URL || '/'}),new MiniCssExtractPlugin({filename: "css/[name].[contenthash:8].css"}),new DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production'),BASE_URL: '"../"' // 定義全局變量BASE_URL}),// new CssMinimizerPlugin(),// new TerserWebpackPlugin({//   parallel: threads, // 開啟多進程//   extractComments: false, // 移除注釋//   terserOptions: {//     compress: {//       pure_funcs: ['console.log'], // 移除console.log//     },//   },// }),],// loader 加載器module: {rules: [// oneOf 不支持 vue-loader ，要單獨拿出來{test: /\.vue$/,loader: "vue-loader",},// 每個文件只有一個loader配置處理{oneOf: [{test: /\.(gif|png|jpe?g)$/i,type: "asset",parser: {dataUrlCondition: {// 小于10kb的圖片轉成base64，減少請求數量// 缺點：體積會大一點maxSize: 10 * 1024, // 小于10kb},},generator: {// 輸出圖片的名稱filename: "imgs/[name].[contenthash:8][ext]",},},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒體文件// 對文件原封不動的輸出type: "asset/resource",// generator: {//   filename: "media/[name].[contenthash:8][ext]",// },},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字體type: "asset/resource",// generator: {//   filename: "fonts/[name].[contenthash:8][ext]"// }},// 簡單場景，不需要復雜轉義時// {//   test: /\.(js|ts|jsx|tsx)$/,//   include: path.resolve(__dirname, 'src'),//   // loader:"babel-loader",//   loader: 'esbuild-loader',//   generator: {//     target: 'es2015'//   }// },// 復雜場景用{test: /\.js$/,exclude: /node_modules/,use: [{loader: 'thread-loader',options: {workers: threads, // 開啟幾個子進程去完成}},{loader: 'babel-loader',options: {presets: ['@babel/preset-env'],cacheDirectory: true, // 開啟babel緩存cacheCompression: false,// 關閉緩存文件壓縮plugins: ['@babel/plugin-transform-runtime'],},},]},{test: /\.css$/,// MiniCssExtractPlugin.loader 最終會將css提取到單獨的文件use: getStyleLoaders(), // 從右向左解析原則// use: ["style-loader", "css-loader"]},{test: /\.less$/,use: getStyleLoaders("less-loader"), // 從右向左解析原則// use: ["style-loader", "css-loader", "less-loader"]},{test: /\.s[ac]ss$/,use: getStyleLoaders("sass-loader")},{test: /\.styl$/,use: getStyleLoaders("stylus-loader")},]}],},// 配置模塊如何解析resolve: {alias: {vue$: "vue/dist/vue.runtime.esm.js",    // 末尾添加 $，以表示精準匹配"@": path.resolve(__dirname, "../src"),},extensions: ["*", ".js", ".json", ".vue"],  // 嘗試按順序解析這些后綴名。如果有多個文件有相同的名字，但后綴名不同，webpack 會解析列在數組首位的后綴的文件 并跳過其余的后綴}
};

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/75897.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/75897.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/75897.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

JavaWeb——事務管理、AOP

JavaWeb——事務管理、AOP

目錄 一、事管理 1.開啟事務管理日志 2.開啟事務管理 3.傳播行為 二、AOP 1.通知類型 2.通知順序 3.切入點表達式 4.連接點 一、事務管理 1.開啟事務管理日志 2.開啟事務管理 3.傳播行為 當一個事務方法被另一個事務方法調用時，這個事物方法應該如何進行事…
閱讀更多...
okhttp3網絡請求

okhttp3網絡請求

一、使用okhttp3和gson build.gradle ... dependencied {...implementation com.squareup.okhttp3:okhttp:3.9.0implementation com.google.code.gson:gson:2.10.1 }二、響應模型 可根據實際情況進行調整，目前我所需的就是這三個變量 HttpResponseData.java im…
閱讀更多...
【藍橋杯每日一題】3.28

【藍橋杯每日一題】3.28

🏝?專欄： 【藍橋杯備篇】 🌅主頁： f狐o貍x "今天熬的夜，會變成明天獎狀的閃光點！" 目錄 一、唯一的雪花 題目鏈接 題目描述 解題思路 解題代碼 二、逛畫展 題目鏈接 題目描述 解題思路 解題代…
閱讀更多...
【MinIO】Bucket的生命周期管理

【MinIO】Bucket的生命周期管理

👻創作者：丶重明 👻創作時間：2025年3月7日 👻擅長領域：運維 目錄 1.ILM使用介紹2.生命周期配置實例 1.ILM使用介紹 對象生命周期管理（ILM）是現代對象存儲系統的核心功能之一&#x…
閱讀更多...
Android 中隱藏標題欄和狀態欄的方法

Android 中隱藏標題欄和狀態欄的方法

在Android開發中，隱藏標題欄和狀態欄是實現全屏顯示的常見需求。 一、隱藏標題欄 1、通過代碼隱藏 對于繼承自 AppCompatActivity 的 Activty，可在 onCreate() 方法中調用supportRequestWindowFeature 或 getSupportActionBar 方法來隱藏標題欄。 ove…
閱讀更多...
進程間通信——信號量

進程間通信——信號量

進程間通信——信號量 目錄 一、基本概念 1.1 概念 1.2 基本操作 1.3 相關函數 1.3.1 semget創建/獲取 1.3.2 semop操作信號量 1.3.3 semctl初始化/刪除 二、代碼操作 2.1 不用PV的 2.2 用PV 的 2.2.1 a.c 2.2.2 b.c 2.2.3 sem.h 2.2.4 sem.c 一、基本概念 1.1…
閱讀更多...
Linux內核2-TFTP與NFS環境搭建

Linux內核2-TFTP與NFS環境搭建

Uboot：引導程序 初始化硬件設備，初始化c語言環境，為內核加載做準備 zImage:內核文件 rootfs:文件系統，為用戶提供一個與硬件設備數據交互的系統 1.TFTP和NFS功能 TFTP:簡單文件傳輸協議網絡配置 pc可以下載 2.minicom bootargs…
閱讀更多...
TDengine 中的命名與邊界

TDengine 中的命名與邊界

簡介 本章主要介紹命名的合法字符集和限制規則，這對于正確使用 TDengine，減小報錯很重要，這些規則在 SQL 語句中都生效，在使用過程中要注意，避免不必要的錯誤。 名稱命名規則 合法字符：英文字符、數字和…
閱讀更多...
C++ 中將函數作為參數傳遞

C++ 中將函數作為參數傳遞

C 中將函數作為參數傳遞 1. 通過指針傳遞函數 函數可以通過傳遞函數的地址來作為參數傳遞&#xff1b;簡而言之&#xff0c;就是通過指針實現這一點。 示例代碼 #include <iostream> using namespace std;// 定義加法和減法函數 #include <iostream> #include …
閱讀更多...
Vala 編程語言教程-繼承

Vala 編程語言教程-繼承

繼承? 在 Vala 中&#xff0c;一個類可以繼承自 ?一個或零個? 其他類。盡管實際開發中通常繼承一個類&#xff08;不同于 Java 等語言的隱式繼承機制&#xff09;&#xff0c;但 Vala 并不強制要求必須繼承。 當定義繼承自其他類的子類時&#xff0c;子類的實例與父…
閱讀更多...
Crypto Architecture Kit簡介

Crypto Architecture Kit簡介

HarmonyOS 5.0.3(15) 版本的配套文檔&#xff0c;該版本API能力級別為API 15 Release 文章目錄 約束與限制能力范圍基本概念與相關Kit的關系 Crypto Architecture Kit屏蔽了第三方密碼學算法庫實現差異的算法框架&#xff0c;提供加解密、簽名驗簽、消息驗證碼、哈希、安全隨機…
閱讀更多...
交流電機類型及其控制技術

交流電機類型及其控制技術

交流電機可分為同步電機和異步電機兩大種類&#xff0c;如果電機轉子的轉速與定子旋轉磁場的轉速相等&#xff0c;轉子與定子旋轉磁場在空間同步地旋轉&#xff0c;這種電機就稱為同步電機。如果電機轉子的轉速不等于定子旋轉磁場的轉速&#xff0c;轉子與定子旋轉磁場在空間旋…
閱讀更多...
SQL語言分類及命令詳解（一）

SQL語言分類及命令詳解（一）

目錄 1. DQL&#xff08;Data Query Language&#xff09;數據查詢語言 主要命令&#xff1a; SELECT 2. DDL&#xff08;Data Definition Language&#xff09;數據定義語言 主要命令&#xff1a; CREATE ALTER DROP TRUNCATE&#xff08;清空表數據&#xff0c;保留…
閱讀更多...
fluent_UDF學習筆記

fluent_UDF學習筆記

UDF源代碼路徑 D:\Program Files\ANSYS Inc\v231\fluent\fluent23.1.0\src關于顆粒反彈速度的計算 /* 通過面法向單位向量計算速度的法向向量、切向向量&#xff0c;再通過法向、切向恢復系數重新計算反彈速度*//* Compute normal velocity.將顆粒速度向面法線方向投影&#x…
閱讀更多...
Go 語言標準庫中sort模塊詳細功能介紹與示例

Go 語言標準庫中sort模塊詳細功能介紹與示例

Go語言的 sort 模塊提供了對切片和自定義數據結構的排序功能&#xff0c;支持基本類型排序、自定義排序規則、穩定排序和二分查找。以下是 sort 模塊的核心方法及示例說明&#xff1a; 1. 基本類型排序 sort.Ints、sort.Float64s、sort.Strings 直接對基本類型的切片進行排序…
閱讀更多...
第十六屆藍橋杯模擬二（串口通信）

第十六屆藍橋杯模擬二（串口通信）

由硬件框圖可以知道我們要配置LED 和按鍵 一.LED 先配置LED的八個引腳為GPIO_OutPut，鎖存器PD2也是，然后都設置為起始高電平，生成代碼時還要去解決引腳沖突問題 二.按鍵 按鍵配置，由原理圖按鍵所對引腳要GPIO_Input 生成代碼，在文件夾中添加code文件夾，code中添加fun.…
閱讀更多...
06-ADC

06-ADC

ADC簡介 Analog-Digital Converter 模擬-數字轉換器 ADC可以將引腳上連續變化的模擬電壓轉換為內存中存儲的數字變量&#xff0c;建立模擬電路到數字電路的橋梁。 12位逐次逼近型ADC&#xff0c;1us轉換時間&#xff1b;輸入電壓范圍&#xff1a;0-3.3V&#xff0c;轉換結果…
閱讀更多...
二層綜合實驗

二層綜合實驗

拓撲圖 實驗要求 1.內網IP地址使用172.16.6.0/16分配 2.sw1和sW2之間互為備份 3.VRRP/STP/VLAN/Eth-trunk均使用 4.所有Pc均通過DHCP獲取IP地址 5.ISP只能配置IP地址 6.所有電腦可以正常訪問IsP路由器環回 實驗思路 這是一個二層綜合實驗每當拿到一個實驗看清楚要求之后都有…
閱讀更多...
Java實現pdf中動態插入圖片

Java實現pdf中動態插入圖片

今天接到一個需求&#xff0c;需要在pdf中的簽名處&#xff0c;插入簽名照片&#xff0c;但簽名位置不固定&#xff0c;話不多說上代碼&#xff1a; 1、首先引入itextpdf依賴包&#xff1a; <dependency><groupId>com.itextpdf</groupId><artifactId>…
閱讀更多...
OpenCV 圖形API（2）為什么需要圖形API？

OpenCV 圖形API（2）為什么需要圖形API？

操作系統&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 編程語言&#xff1a;C11 G-API背后的動機 G-API模塊為OpenCV帶來了基于圖的執行模型。本章簡要描述了這種新模型如何在兩個方面幫助軟件開發者&#xff1a;優化和移植圖像處理算法…
閱讀更多...
最新文章

Copyright @ 2022~2023