已亲测,绝对有效,底部有改善前后对比图证明。
1.服务器 nginx 增加配置
#开启gzip压缩
gzip on;
#设置gzip压缩级别,2级是性价比最高的
gzip_comp_level 2;
#设置动态gzip压缩的文件类型
gzip_types text/plain text/css text/javascript application/javascript;
#http的协议版本
gzip_http_version 1.0;
#IE版本1-6不支持gzip压缩,关闭
gzip_disable 'MSIE[1-6].';
2.安装 compression-webpack-plugin
npm install compression-webpack-plugin@5.0.2webpack的版本和compression-webpack-plugin的版本要装得一致
否则要报错: 'tapPromise' of undefined这个一般不用装:npm install webpack –save-dev
3.vue.config.js
const CompressionWebpackPlugin = require("compression-webpack-plugin");chainWebpack(config) {
//config.when(process.env.NODE_ENV !== 'development', (config) => {config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{// `runtime` must same as runtimeChunk name. default is `runtime`inline: /runtime\..*\.js$/,},]).end();config.optimization.splitChunks({chunks: 'all',automaticNameDelimiter:'-',cacheGroups: {elementUI: {name: "chunk-elementUI",priority: 40,test: /[\/]node_modules[\/]_?element-ui(.*)/,minSize:0},moment: {name: "chunk-moment",priority: 39,test: /[\/]node_modules[\/]_?moment(.*)/,minSize:0,enforce:true},components: {name: "chunk-components",test: resolve('src/components'),minChunks: 2,priority: 5,reuseExistingChunk: true},libs: {name: 'chunk-libs',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial', // only package third parties that are initially dependent},},});config.optimization.runtimeChunk('single');config.performance.set("hints", false);config.devtool("none");config.plugin("compression").use(CompressionWebpackPlugin, [{filename: "[path][base].gz[query]",algorithm: "gzip",test: /\.(js|css)$/,threshold: 8192,minRatio: 0.8,deleteOriginalAssets: false,},]);//});
}
4.改善前后对比