【vue3】打包配置webpack压缩，哈希值设置

压缩配置

依赖下载：

npm i --save-dev compression-webpack-plugin

vue.config.js配置

const CompressionWebpackPlugin = require('compression-webpack-plugin');



    filenameHashing: true, // 打包后为文件名增加hash值
    // 配置webpack
    configureWebpack: config => {
        // if (isProduction) {
            // 开启gzip压缩
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: /\.js$|\.html$|\.json$|\.css/,
                threshold: 10240,
                minRatio: 0.8
            }))
            // 开启分离js
            config.optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name(module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`
                            }
                        }
                    }
                }
            }
            // 取消webpack警告的性能提示
            config.performance = {
                hints:'warning',
                //入口起点的最大体积
                maxEntrypointSize: 50000000,
                //生成文件的最大体积
                maxAssetSize: 30000000,
                //只给出 js 文件的性能提示
                assetFilter: function(assetFilename) {
                    return assetFilename.endsWith('.js');
                }
            }
        // }
    },

打包文件哈希值

config.output.filename('js/[name].[hash].js').end()

页面结构总览

相关链接：
vue打包压缩