vue配置gzip指南

原创  郑建华   2021-03-26   55人阅读  1 条评论

一、安装插件(compression-webpack-plugin)

npm install compression-webpack-plugin --save-dev

可能出现的错误:

Unsupported URL Type: npm:vue-loader@^16.1.0

原因:npm版本过低

npm@5.6.0 解决:更新npm版本 npm install -g npm

二、配置vue.config.js

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后还可以加载到原始资源文件)
      })
    ]
  }
}


本文地址:https://www.zjh336.cn/?id=2028
版权声明:本文为原创文章,版权归 郑建华 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

 评论列表

  1. fed
    fed 【实习生】  @回复

    单号购买 快递购买 空包代发www.uudanhaowang.com