一、安装插件(compression-webpack-plugin)
1
| npm install compression-webpack-plugin --save-dev
|
可能出现的错误:
Unsupported URL Type: npm:vue-loader@^16.1.0
原因:npm版本过低
解决:更新npm版本
二、配置vue.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| const CompressionPlugin = require('compression-webpack-plugin') module.exports = { // productionSourceMap: false, publicPath: '/', // 打包输出路径 outputDir: 'dist', // 打包静态资源输出路径 assetsDir: 'static', devServer: { open: true, host: '0.0.0.0', port: 8082 }, css: { loaderOptions: { sass: { prependData: `@import "./src/assets/scss/theme.scss";` } } }, configureWebpack: { plugins: [ new CompressionPlugin({ algorithm: 'gzip', // 使用gzip压缩 test: /\.js$|\.html$|\.css$/, // 匹配文件名 // filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz) minRatio: 1, // 压缩率小于1才会压缩 threshold: 10240, // 对超过10k的数据压缩 deleteOriginalAssets: false // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件) }) ] } }
|