vue打包文件太大导致加载时间太久,开启gzip减少文件体积

vue-cli3或4脚手架搭建的项目

第一步:安装依赖:

npm i compression-webpack-plugin -D

第二步:在vue.config.js中配置:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  publicPath: './',
  assetsDir: 'static',
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件

  // 该对象将会被 webpack-merge 合并入最终的 webpack 配置
  configureWebpack: config => {
    //配置别名
    config.resolve = {
      extensions: [".js", ".vue", ".json", ".css"],
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": resolve("./src")
      }
    };
    if (isProduction) {
      // gzip压缩
      const productionGzipExtensions = ['html', 'js', 'css']
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' + productionGzipExtensions.join('|') + ')$'
          ),
          threshold: 10240, // 只有大于该值(10.24kb)的资源会被处理 
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false // 删除原文件
        })
      )
    }
  },
}

第三步:终端中输入npm run build,打包后结果:

第四步:前端代码虽然压缩了,但是还需要服务端配置才能生效,下面以nginx为例:

server{
    listen 10082;
    server_name localhost;
    
    #on为启用，off为关闭
    gzip on;
    #设置允许压缩的页面最小字节数
    gzip_min_length 1k;
    #gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值
    gzip_comp_level 5;
    #获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位获得
    gzip_buffers 4 16k;
    #对特定的MIME类型生效,其中'text/html’被系统强制启用
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

}

nginx配置参考:https://blog.csdn.net/sd19871122/article/details/98845591

 

如果是node服务器,可以直接使用 compression 实现开启gzip,而不需要在前端设置gzip,详情请戳: https://blog.csdn.net/bamboozjy/article/details/110368273