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

压缩配置

依赖下载：

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

vue.config.js配置

const CompressionWebpackPlugin = require('compression-webpack-plugin');filenameHashing: true, // 打包后为文件名增加hash值// 配置webpackconfigureWebpack: config => {// if (isProduction) {// 开启gzip压缩config.plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',test: /\.js$|\.html$|\.json$|\.css/,threshold: 10240,minRatio: 0.8}))// 开启分离jsconfig.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/packageNameconst packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]// npm package names are URL-safe, but some servers don't like @ symbolsreturn `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打包压缩