webpack常用配置与性能优化插件

news2024/10/5 2:36:38

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web 开发中所面临的困境。

提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高开发效率和项目的可维护性。

  • 直接代码加注释
/**
* 各个webpack版本之间存在一定差异，经常报一些莫名错误，本次配置基于webpack@4+ webpack-cli@3+
*/
//path模块是node.js中处理路径的核心模块。可以方便的处理关于文件路径的问题。
//path路径参数   参考文档https://www.cnblogs.com/jkko123/p/10234362.html
const path = require('path')
 
//解析和转换.vue文件，提取出其中的逻辑代码script，样式代码style以及HTML模板template，再分别将它们交给对应的loader去处理。
//使用vue-loader@15以上都需要使用vueloaderplugin这个插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
//html-webpack-plugin插件 生成的内存中的页面已帮我们创建并正确引用了打包编译生成的js及css文件
const htmlWebpackPlugin = require('html-webpack-plugin');
 
//帮我们清除 打包之后 输出 目录下的其他多余或者无用的代码  每次生成代码之前先将输出的打包文件夹目录清空
//因为我们之前可能生成过其他的代码如果不清楚的话可能多个代码掺杂在一起容易把我们搞混乱了clean-webpack-plugin插件就是这样由来的
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 
//mini-css-extract-plugin 插件是 webpack4+ 版本的，可以直接安装使用。这里只能把所有样式包括css、less都打包到一个css文件，然后再 link 进页面。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
//webpack编译的进度条插件
const WebpackBar = require('webpackbar');
 
//打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验。
 const CompressionPlugin = require("compression-webpack-plugin");
 
//由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。
//我们需要Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
//由于 JavaScript 是单线程模型，要想发挥多核 CPU 的能力，只能通过多进程去实现，而无法通过多线程实现。
//  const HappyPack = require('happypack');
 const os = require('os'); //os 模块提供了与操作系统相关的实用方法和属性。 使用方法参考http://nodejs.cn/api/os.html#os_os
//  const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
 
//性能分析页面工具
const BundleAnalyzerPlugins = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
//webpack自动集成了Terser如果你想更改、添加压缩工具，又或者是想对Terser进行配置，使用下面的webpack配置即可。
 const TerserPlugin = require('terser-webpack-plugin');
// 压缩css
const optimizeCss = require('optimize-css-assets-webpack-plugin');
const webpack = require("webpack");
const AddAssetHtmlWebpackPlugin = require("add-asset-html-webpack-plugin");
module.exports = {
    //entry: 配置入口文件，以入口文件为起点，查找模块间的引用关系，递归的处理文件 (从哪个文件开始打包)
    entry: './src/main.js',
    //output: 配置输出 (打包到哪去)
    output: {
        // 打包输出的目录 (必须是绝对路径)
        path: path.join(__dirname, 'dist'),
        // 打包生成的文件名
        //hash 只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值只要有一个模块发生变化，产出所有文件的hash也会变
        //chunkhash chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。通常情况下一个入口对应一个chunk,我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。
        filename: 'bundle.[hash:8].js', //id、hash、name、chunkhash
        //chunkFilename 指未被列在 entry 中，却又需要被打包出来的 chunk 文件的名称。一般来说，这个 chunk 文件指的就是要懒加载的代码。
        chunkFilename:'[name].js'
    },
    // 查找模块的规则,别名
    resolve: {
        alias: {
            "@": path.resolve("src"),
            "@component": path.resolve("src/component"),
            // "@pages": path.resolve("src/pages"),
            // "@utils": path.resolve("src/utils"),
        },
        //在导入语句没带文件后缀时，webpack会自动带上后缀去尝试访问文件是否存在。resolve.extensions用于配置在尝试过程中用到的后缀列表，默认是：　["", ".webpack.js", ".web.js", ".js"]
        extensions: ['.vue','.js','.css','json']
    },
    // 模块加载
    module: {
        noParse: /lodash/,//不去解析属性值代表的库的依赖
        // loader的规则
        rules: [{
                // 配置 js文件
                test: /\.js$/,
                // exclude: /node_modules/,//排除node_modules 目录下的文件
                include: path.resolve(__dirname, 'src'), //编译src文件夹下的js文件
                use: [
                    //为loader开启缓存 将loader的解析结果保存下来，让后续的解析直接使用缓存的结果
                    //  {
                    //      loader: "cache-loader",
                    //      options: {
                    //          cacheDirectory: "./cache" //缓存的目录
                    //      }
                    //  },
                    /*
                        thread-loader会对其后面的loader（这里是babel-loader）开启多进程打包。
                        进程启动大概为600ms，进程通信也有开销。(启动的开销比较昂贵，不要滥用) 只有工作消耗时间比较长，才需要多进程打包
                        thread-loader必须最后执行，再次说明loader是从下往上，从右往左的执行顺序,所以想要使用thread-loader优化某项的打包速度，必须放在其后执行
                        */
                    //  {
                    //      loader:"thread-loader"
                    //  },
                    {
                        //把对.js 的文件处理交给id为babel 的HappyPack 的实例执行
                        //  loader: 'happypack/loader?id=babel',
                        //Babel是一个JavaScript编译器，能够让我们放心的使用新一代JS语法 ,会编译成浏览器可识别的ES5语法。
                        loader: 'babel-loader',
                        options: {
                            "presets": ["@babel/preset-env"], // 用于处理高版本 js语法 的兼容性
                        }
                    }
                ]
            }, {
                // 正则表达式，用于匹配所有的css文件
                test: /\.css$/,
                use: [
                    // {
                    //     loader: MiniCssExtractPlugin.loader, //把css分割成单独的文件
                    //     options: {
                    //         publicPath: ''
                    //     }
                    // },
                    'style-loader',//style-loader是将css-loader打包好的css代码以style的形式插入到文件中。
                   'css-loader', // 先用 css-loader 让webpack能够识别 css 文件的内容
                ]
            },
            //图片默认转成 base64 字符串了,
            // 好处就是浏览器不用发请求了，直接可以读取
            // 坏处就是如果图片太大，再转base64就会让图片的体积增大 30% 左右, 得不偿失所以需要通过 options 配置选项进行配置 limit, 可以设置一个临界值, 大于这个值会整个文件直接打包到目录中, ,如果小于这个值, 就会转成 base64, 节约请求的次数
            {
                test: /\.(png|jpg|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 超过 8k 就不转 base64, 小于 8k 才转
                        limit: 8 * 1024
                    }
                }]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.vue$/,
                use: ['vue-loader'] //webpack是无法识别vue文件的，要使用render渲染，必需要使用vue-loader来处理vue文件
            }
        ],
    },
    //优化
    // optimization: {
    //     splitChunks: {
    //         分包策略
    //         默认是async：只提取异步加载的模块出来打包到一个文件中。异步加载的模块：通过import('xxx')或require(['xxx'],() =>{})加载的模块。
    //         initial：提取同步加载和异步加载模块，如果xxx在项目中异步加载了，也同步加载了，那么xxx这个模块会被提取两次，分别打包到不同的文件中。同步加载的模块：通过 import xxx或require('xxx')加载的模块。
    //         all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中。
            // chunks: 'all',
            // name: true,
            // 超过指定大小进行模块分包 默认为0，表示不限制大小。
            // maxSize:50,
            // cacheGroups: {//核心重点，配置提取模块的方案
            //     vendors: { //自定义打包模块
            //         name: "chunk-vendors",
            //         test: /[\\/]node_modules[\\/]/, //用来匹配要提取的模块的资源路径或名称。值是正则或函数。
            //         priority: 0, //方案的优先级，值越大表示提取模块时优先采用此方案。默认值为0。
            //         chunks: "initial" // 只打包初始时依赖的第三方
            //     },
            //     elementUI: {
            //         name: "chunk-elementUI", // 单独将 elementUI 拆包
            //         priority: 20, // 权重要大于 vendors 不然会被打包进 vendors
            //         test: /[\\/]node_modules[\\/]element-ui[\\/]/
            //     }
            //     ,
            //     lodash: {
            //         name: "chunk-lodash", // 单独将 lodash 拆包
            //         priority: 20, // 权重要大于 vendors 不然会被打包进 vendors
            //         test: /[\\/]node_modules[\\/]lodash[\\/]/
            //     }
            // }
            // },
            //js压缩 仅适用于source-map，inline-source-map，hidden-source-map和nosources-source-map值的devtool选项
            //为什么？eval包装模块，eval("string")最小化器不处理字符串。cheap 没有列信息，并且最小化器仅生成单行，仅留下单个映射。
        //      minimize: true, // 是否要启用压缩，默认情况下，生产环境会自动开启
        //      minimizer: [ // 压缩时使用的插件，可以有多个
        //          new TerserPlugin({
        //              parallel: os.cpus().length - 1,//开启几个进程来处理压缩，默认是 os.cpus().length - 1
        //              cache: true, // 是否缓存
        //              test: /\.js(\?.*)?$/i, //匹配需要压缩的文件
        //              terserOptions: {
        //                  mangle:true, // 混淆，默认也是开的，mangle也是可以配置很多选项的，具体看后面的链接
        //                  parrlel: true,// 多线程处理
        //                      compress: {
        //                          drop_console: false,//传true就是干掉所有的console.*这些函数的调用.
        //                          drop_debugger: true, //干掉那些debugger;
        //                          pure_funcs: ['console.log'] // 如果你要干掉特定的函数比如console.info ，又想删掉后保留其参数中的副作用，那用pure_funcs来处理
        //                      }
        //                  },
        //             //是否将注释剥离到单独的文件中 默认情况下 剥离
        //             // /^\**!|@preserve|@license|@cc_on/i 正则表达式匹配的注释，其余注释会删除。
        //             // 如果原始文件名为 bundle.js ，则注释将存储到 bundle.js.LICENSE.txt 。
        //             extractComments: true
        //          }),
                //压缩css
                // new optimizeCss({
                //     cssProcessor: require('cssnano'), //引入cssnano配置压缩选项
                //     cssProcessorOptions: {
                //         discardComments: { removeAll: true } //删除注释
                //     },
                //     canPrint: false //是否将插件信息打印到控制台
                // }),
        //      ],
    // },
    /**
     * source-map //外部 错误代码准确信息 和源代码位置
     * inline-source-map //只会生成一个内联source-map 错误代码准确信息 和源代码位置
     * hidden-source-map //外部 错误代码错误原因，没有位置，不能追踪源代码错误，只能看到构建后的错误
     * eval-source-map //每个文件都生成对应的source-map都在eval 错误代码准确信息 和源代码位置
     * nosources-source-map //外部 错误代码准确信息 没有源代码信息
     * cheap-source-map //外部 错误代码准确信息 没有源代码信息,只能精确到行
     * cheap-module-source-map //外部 错误代码准确信息 没有源代码信息
     * 内联和外部的区别 1.外部会生成文件 ，内联没有 2.内联构建速度更快  https://juejin.cn/post/6844903450644316174
     * 开发环境推荐：cheap-module-eval-source-map   生产环境推荐：cheap-module-source-map
     */
    //  devtool:'source-map',
    // 打包模式 production 压缩/development 不压缩  https://blog.csdn.net/m0_37938910/article/details/91044549
    mode: 'development',
    plugins: [
        new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
            title: "测试webpack",
            template: path.join(__dirname, './public/index.html'), //指定模板页面
            //将来会根据此页面生成内存中的页面
            filename: 'index.html', //指定生成页面的名称，index.html浏览器才会默认直接打开
            minify:{ //压缩HTML文件
                removeComments:true,  //移除HTML中的注释
                collapseWhitespace:true  //删除空白符与换行符
            }
        }),
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        //引入清除插件
        new CleanWebpackPlugin({}),
 
        //webpack编译时的进度条
        new WebpackBar({
            "color": "yellow"
        }),
        //把css处理成单独的文件
        // new MiniCssExtractPlugin({
        //     filename: "[hash:8].css"
        // }),
        //开启gzip压缩
        //  new CompressionPlugin({
        //      filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
        //         algorithm: 'gzip',//算法
        //         test: new RegExp(
        //           '\\.(js|css)$'  //压缩 js 与 css
        //         ),
        //         threshold: 10240,//只处理比这个值大的资源。按字节计算
        //         minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
        //      }),
        //开启性能分析插件，当首次编译打包后会自动谈起分析页面
        new BundleAnalyzerPlugins({
            //  可以是`server`，`static`或`disabled`。
            //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
            //  在“静态”模式下，会生成带有报告的单个HTML文件。
            analyzerMode: 'server',
            //  将在“服务器”模式下使用的主机启动HTTP服务器。
            analyzerHost: '127.0.0.1',
            //  将在“服务器”模式下使用的端口启动HTTP服务器。
            analyzerPort: 8888,
            //  相对于捆绑输出目录。`static`模式下生成的报告文件。
            reportFilename: 'report.html',
            //  模块大小默认显示在报告中。`stat`，`parsed`或者`gzip`中的一个。
            defaultSizes: 'parsed',
            //  在默认浏览器中自动打开报告
            openAnalyzer: true,
            //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
            generateStatsFile: false,
            //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
            //  相对于捆绑输出目录。
            statsFilename: 'stats.json',
            //  stats.toJson（）方法的选项。
            //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。
            statsOptions: null,
            logLevel: 'error'
        }),
        //    new HappyPack({
        //          /*
        //           * 必须配置
        //           */
        //          // id 标识符，要和 rules 中指定的 id 对应起来
        //          id: 'babel',
        //          // 需要使用的 loader，用法和 rules 中 Loader 配置一样
        //          // 可以直接是字符串，也可以是对象形式
        //          loaders: ['babel-loader'],
        //          //threadPool: HappyThreadPool对象，代表共享进程池，即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务，以防止资源占用过多
        //          threadPool: happyThreadPool
        //     })
        //告诉webpack哪些库不参与打包
        // new webpack.DllReferencePlugin({
        //     manifest:path.resolve(__dirname,'dll/manifest.json'),//dll打包生成的manifest.json文件路径 该文件描述dll打包路径信息
        // }),
        // // //将某个文件打包输出去,并在html中自动引入改资源
        // new AddAssetHtmlWebpackPlugin({
        //     filepath:path.resolve(__dirname,'dll/lodash.js')
        // })
    ],
    //DevServer 是webpack开发服务器。
    devServer: {
        //告诉服务器,从哪个文件夹中获取内容
        contentBase: path.join(__dirname, 'dist'),
        // 配置 DevServer 服务监听的地址,只有本地可以访问 DevServer 的 HTTP 服务
        host: 'localhost',
        // 配置请求的端口号,默认为8080
        port: '3000',
        //当开启服务器时,自动打开页面
        open: false,
 
        inline:true,
        // 启用HRM热更新
        hot: true,
        // //即使hot没有生效，浏览器也不自动刷新
        // hotOnly:true,
         
        // 如果使用webpack-dev-server，需要设为true，禁止显示devServer的console信息
        quiet: true,
 
        proxy: {
            '/weather': {
              target: 'http://api.k780.com/',
              changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
              pathRewrite: { '^/weather': ''}
            }
        }
    }
}

webpack性能优化

在这里插入图片描述

性能优化主要体现在三个方面：

  • 构建性能

    • 这里所说的构建性能，是指在开发阶段的构建性能，而不是生产环境的构建性能;
    • 优化的目标: 降低从打包开始，到代码效果呈现到页面所需要的时间。

  • 传输性能

    • 传输性能是指，打包后的JS代码从服务器传输到用户浏览器经过的时间。

  • 运行性能

    • 运行性能是指，JS代码在浏览器端的运行速度，它主要取决于我们书写代码质量的高低。

总结

  1. 性能优化主要从构建性能、传输性能和运行性能三个方面入手；
  2. 性能优化没有完美的解决方案，需要具体情况具体分析；
  3. 永远不要过早的关注于性能。因为你在开发的时候，无法完全预知最终的运行性能，过早的关注性能会极大的降低开发效率。

减少模块解析

模块解析包括：抽象语法树分析、依赖分析、模块语法替换
哪些模块不需要解析？
模块中无其他依赖：一些已经打包好的第三方库

如何让某个模块不要解析？
配置webpack.config.js文件中的module.noParse，它是一个正则，被正则匹配到的模块不会解析。

ps:平时的项目可能体验不明显，但在大型项目中引入的第三方npm包过多，配置noParse可明显提升构建效率。

module.exports = {
    ...
    module: {
        noParse:/moment|lodash/ 用|配置多个
    }
}

优化loader性能

限制loader的应用范围
思路：对于某些库，不使用

loaderlodash是在ES5之前出现的库，使用的是ES3语法

通过module.rule.exclude或module.rule.include，排除或仅包含需要应用loader的场景

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            //或 include: /src/,
            use: "babel-loader"
        }]
    }
}

缓存loader的结果

如果某个文件内容不变，经过相同的loader解析后，解析后的结果也不变，所以我们可以将loader的解析结果保存下来，让后续的解析直接使用缓存的结果，当然这种方式会增加第一次构建时间

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: "cache-loader",
                options:{
                    cacheDirectory: "./cache" //缓存的目录
                }
            },...loaders] //其余的loaders
        }]
    }
};

为loader开启多线程

如果loader进行处理的过程是一个异步操作的话，可以大大减少处理时间，thread-loader会开启一个线程池，它会把后续的loader放到线程池的线程中运行，以提高构建效率。因为后续的loader是放入新的线程池中，就无法使用webpack api、自定义的plugin api，也无法访问的webpack options。具体把thread-loader放在什么位置，要根据项目视情况而定，可以傻瓜式测试。

但要注意的是，开启和管理新的线程也是需要时间的。

module.exports = {
    mode: "development",
    module: {
        rules: [{
            test: /\.js$/,
            use: [
              "thread-loader", //将thread-loader和babel-loader放入新的线程中
              "babel-loader"
            ]
        }]
    }
};

热替换 HMR

我们在使webpack-dev-server开发服务器时，他会实时的监控代码变动，不需要重新打包，但是webpack-dev-server发现代码变动的时候，浏览器会刷新，重新请求所有资源。这显然不是我们开发最理想的结果，我们更希望，当我们更改一部分代码的时候，浏览器不刷新，只是局部进行替换。热替换就是实习了局部替换。要注意热替换不会降低构建的性能，但是它可以降低代码变动到效果呈现的时间。
在这里插入图片描述

module.exports = {
    devServer:{
         hot:true // 开启热替换
    }
}

当使用 hot 时，只能使用hash，如果使用chunkhash会报错

finish，各位观众姥爷收藏➕关注，追好文不迷路💗

更多推荐：wantLG的《事件循环，还在微任务宏任务？过时了，快看看新版浏览器事件循环event loop(message loop)》

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

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

相关文章

Bigemap如何添加mapbox图源？

Bigemap如何添加mapbox图源？

会使用到的工具 bigemap gis office，下载链接：BIGEMAP GIS Office-全能版 打开软件，要提示需要授权和添加地图，然后去点击选择地图这个按钮，列表中有个添加按钮点进去选择添加地图的方式。 第一种方式：通…
阅读更多...
k8s-2 集群升级

k8s-2 集群升级

首先导入镜像到本地 然后上传镜像到仓库 在所有集群节点 部署cri-docker k8s从1.24版本开始移除了dockershim，所以需要安装cri-docker插件才能使用docker 配置cri-docker 升级master 节点 升级kubeadm 执行升级计划 修改节点套接字 腾空节点 升级kubelet 配置k…
阅读更多...
MySQL备份及恢复

MySQL备份及恢复

目录 MySQL备份 MySQL备份方法 备份策略 mysql的完全备份 mysql的增量备份 MySQL恢复 mysql完全恢复 mysql增量备份的恢复 MySQL备份 MySQL备份是基于对MySQL的日志进行备份，且恢复也是通过日志进行数据恢复。 MySQL备份方法 物理备份：直接对…
阅读更多...
如何在一个月内通过PMP考试？

如何在一个月内通过PMP考试？

新版本考纲，有一个最大的难点。那就是知识点来自《PMBOK指南》，以及《敏捷实践指南》；但是考试大纲给了3个域、35个任务，这些只给了条目性的提纲，对应着考试的实践要求。 考试题目全部是基于情境的选择题，…
阅读更多...
苹果开发者账号注册及证书生成方法详解

苹果开发者账号注册及证书生成方法详解

转载：注册苹果开发者账号的方法 在2020年以前，注册苹果开发者账号后，就可以生成证书。 但2020年后，因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号，所以需要缴费才能创建ios证书了。 所以新政策…
阅读更多...
MySQL全局优化与Mysql8.0新增特性

MySQL全局优化与Mysql8.0新增特性

Mysql全局优化总结 ​ 从上图可以看出SQL及索引的优化效果是最好的，而且成本最低，所以工作中我们要在这块花更多时间。 补充一点配置文件my.ini或my.cnf的全局参数： 假设服务器配置为： CPU：32核内存：6…
阅读更多...
包含日志文件

包含日志文件

原理：某个PHP文件存在本地包含漏洞，却无法上传正常文件，包含漏洞却不能利用，攻击者就有可能会利用apache日志文件来入侵。 Apache服务器运行后会生成两个日志文件，这两个文件是access.log(访问日志)和error.log(错误日…
阅读更多...
Vue3大屏项目实现数字跳动的效果

Vue3大屏项目实现数字跳动的效果

一、vue-count-to组件&#xff1a; 1、安装&#xff1a; npm install vue3-count-to --save 2、使用&#xff1a; <template><BaseCountTo:startVal"startVal":endVal"endVal":duration"duration":decimals"decimals":pr…
阅读更多...
千万级用户的大型网站，如何进行服务器压力预估？

千万级用户的大型网站，如何进行服务器压力预估？

前言&#xff1a;一般情况下&#xff0c;单台Tomcat服务器每秒支撑500请求&#xff0c;单台MySQL数据库每秒支撑5000左右的请求&#xff0c;单台Redis缓存支撑每秒几万请求。 1、千万级用户量的压力预估 假设大型网站预估用户数是1000万&#xff0c;那么根据28法则&#xff0c…
阅读更多...
河南分销系统开发怎么做产品分销？

河南分销系统开发怎么做产品分销？

一个好的产品&#xff0c;如何去找好的分销团队来帮自己做分销&#xff0c;首先这里面是好产品是一个相对的一个概念。 首先什么样才叫好产品&#xff0c;像我们来说&#xff0c;经常我们说做分销&#xff0c;我们尽量找一些高频的&#xff0c;有一些竞争力的产品&#xff0c;我…
阅读更多...
乖离率BIAS指标选股公式，判断多空力量和超买超卖

乖离率BIAS指标选股公式，判断多空力量和超买超卖

乖离率(BIAS)指标用于衡量股价与移动平均线之间的偏离程度&#xff0c;可以用来判断当前市场的多空力量和超买超卖情况。 乖离率的计算公式比较简单&#xff0c;如下&#xff1a; BIAS (收盘价 - N日移动平均价) / N日移动平均价 100 其中&#xff0c;N代表选择的时间周期…
阅读更多...
扩散模型新应用——微软推出蛋白质生成框架EvoDiff

扩散模型新应用——微软推出蛋白质生成框架EvoDiff

作者 | 谢年年 最近&#xff0c;微软推出了一个名为EvoDiff的通用框架&#xff0c;据称它可以根据蛋白质序列生成“高保真度”和“多样性”的蛋白质。 这项技术的意义非凡&#xff0c;因为蛋白质是构成我们身体的疾病的基本组成部分。通过研究蛋白质&#xff0c;我们可以揭示疾…
阅读更多...
vue项目实现地址自动识别功能

vue项目实现地址自动识别功能

1、安装第三方依赖 npm install address-parse 2、在需要使用的页面引入 import AddressParse from address-parse; 3、在页面上写入静态的html代码&#xff0c;可以输入地址&#xff0c;加上识别的输入框&#xff1b; <div class"auto_address"><van-…
阅读更多...
数据结构 - 链表

数据结构 - 链表

线性表的链式存储结构 概念 将线性表 L (a0, a1, … , an-1)中各元素分布在存储器的不同存储块&#xff0c;成为结点&#xff0c;通过地址或指针建立元素之间的联系。 结点的 data 域存放数据元素 ai &#xff0c;而 next 域是一个指针&#xff0c;指向 ai 的直接后继 ai1 …
阅读更多...
医学影像信息(PACS)系统软件源码

医学影像信息(PACS)系统软件源码

PACS系统是PictureArchivingandCommunicationSystems的缩写&#xff0c;与临床信息系统&#xff08;ClinicalInformationSystem,CIS&#xff09;、放射学信息系统(RadiologyInformationSystem,RIS)、医院信息系统(HospitalInformationSystem,HIS)、实验室信息系统&#xff08;L…
阅读更多...
FL Studio21.0.3最新中文版下载安装详解

FL Studio21.0.3最新中文版下载安装详解

安装第一步&#xff1a;卸载干净fl历史旧版本&#xff0c;彻底退出安全软件 &#xff08;如果下载好的文件无法打开&#xff0c;可以去百度下载一个解压工具&#xff0c;比如bandzip、360压缩、2345好压...&#xff09;&#xff08;卸载直接用电脑管家卸载或者在左下角开始处找…
阅读更多...
2023年贵州省职业院校技能大赛高职组信息安全管理与评估竞赛试题

2023年贵州省职业院校技能大赛高职组信息安全管理与评估竞赛试题

2023年贵州省职业院校技能大赛高职组 信息安全管理与评估 竞赛试题 第一阶段竞赛项目试题 根据信息安全管理与评估技术文件要求&#xff0c;第一阶段为网络平台搭建与网络安全设备配置与防护。本文件为信息安全管理与评估项目竞赛-第一阶段试题。 介绍 竞赛阶段 任务阶段 竞…
阅读更多...
CDN加速器有哪些？

CDN加速器有哪些？

一、前端使用CDN加速的优缺点 1.CDN优点 (1). 提高网站性能&#xff1a; CDN&#xff08;内容分发网络&#xff09;可以将静态资源&#xff08;如脚本、样式表、图片等&#xff09;缓存在服务器节点上&#xff0c;并通过就近访问用户&#xff0c;从而提供更快的加载速度和更好…
阅读更多...
激活函数之ReLU, GeLU, SwiGLU

激活函数之ReLU, GeLU, SwiGLU

&#x1f604; 废话不多说&#xff0c;直入主题。 ReLU&#xff1a;之前的一些经典网络里的标配&#xff0c;如ResNet等。GeLU&#xff1a;huggingface实现的bert里的标配激活函数。SwiGLU&#xff1a;目前很多大模型里的标配激活函数&#xff0c;如Google的PaLM&#xff0c;M…
阅读更多...
基于复旦微的FMQL45T900全国产化ARM核心模块（100%国产化）

基于复旦微的FMQL45T900全国产化ARM核心模块（100%国产化）

TES745D是一款基于上海复旦微电子FMQL45T900的全国产化ARM核心板。该核心板将复旦微的FMQL45T900&#xff08;与XILINX的XC7Z045-2FFG900I兼容&#xff09;的最小系统集成在了一个87*117mm的核心板上&#xff0c;可以作为一个核心模块&#xff0c;进行功能性扩展&#xff0c;能…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023