vue解决打包后文件过大的问题-使用压缩插件打包后压缩文件-compression-webpack-plugin

前言：

        在用vue开发项目的时候，经常会面临一个文件，就是打包以后文件太大，首页加载时间长的问题，一般我们会从压缩文件，cdn引入文件，加载整合雪碧图等等的方式来优化，这里来谈谈压缩文件，主要使用的插件：compression-webpack-plugin

压缩文件优点：

       1，打包后页面加载速度变快（文件都小了）
       2，打包完的文件会把我们需要的体积比较大的文件根据功能界面拆分开

比较：很明显的感觉文件变多了，每一个的体积变小了

压缩前：

压缩后：

压缩前页面：

压缩后页面：

具体使用步骤:

1、安装：

cnpm install compression-webpack-plugin --save

2、打开vue.config.js

*if(process.env.NODE_ENV === 'production'){  必须有，不然本地的话引入文件是找不到的

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')


configureWebpack: config => {
    if(process.env.NODE_ENV === 'production'){
      // 定义压缩文件类型
      const productionGzipExtensions = ['js', 'css', 'svg', 'ttf', 'otf']
      config.plugins.push(
        // 缓存dll,优化编译速度
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false // 删除原文件true=删
        })
      )
    }


  },

3、重启服务