vue 打包页面分析及gzip压缩

1，页面的性能分析 ，可以针对每一个页面出优化方案
在package.json文件中 ，添加如下代码：

 "scripts": {
        "report": "vue-cli-service build --report", //"report" 可以自定义
    },

注意：vue-cli 的版本要高 需要升级版本 ，在控制台执行 vue upgrade，

输入 Y.，执行完会发现主要有 2 个文件被修改 ，但亲测并不会影响

 然后执行 npm run serve

查看是否有报错，如果报错 应该是插件需要升级为最新的版本

 最后执行 npm run report

会在dist文件中生成一个 report.html文件，打开它就可以查看 每个页面的数据分析 方便优化~

试图如下：

2，gzip打包，提升用户的访问速度，不占内存

第一步： 全局安装 压缩工具

安装：npm install compression-webpack-plugin -D 

第二步： vue.config.js 中配置

const CompressionPlugin = require('compression-webpack-plugin')

  chainWebpack: config => {
  
          // 图片压缩
      config.module.rule('images')
          .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
          .use('image-webpack-loader')
          .loader('image-webpack-loader')
          .options({
              bypassOnDebug: true
          })
         //文件压缩
      config.when(process.env.NODE_ENV === 'production', config =>
          config.plugin('compression')
          .use(CompressionPlugin, [{
              algorithm: 'gzip',
              test: /\.js$|\.html$|\.css/,
              threshold: 10240,
              deleteOriginalAssets: false
          }])
      )
  },

第三步： 然后执行 npm run report
发现在dist文件 有gzip打包文件

第四步： 找运维小哥哥帮忙在服务器端开启nginx的 gzip压缩配置 就可以了~~