android 加载vue页面卡顿

把我优化vue载入速度的问题总结一下。

我的博客项目放在服务器后加载要18-20秒，其实这个问题拖了很久了，昨天才有时间处理一下。

之前以为是首页的mp4资源太大，但昨天看了后发现主要是vue打包后的js文件载入用了最多时间，如下图（优化前没截图，这个是优化后的。优化前大小是2m多，时间是十几秒）

带宽合格的服务器其实2m的文件用不到十几秒的，但我买的带宽是1Mbps （穷是原罪），速度太慢。

那么就从优化文件大小入手。

步骤：

1. 将路由改为懒加载，修改router文件

如下图，之前的写法是红色箭头所指。改为蓝色箭头写法即可。

文档：

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html此步骤做好后打包会发现js和css文件多了很多（如下图）

如果还想再优化速度，可以进行步骤2

2.使用gzip

（1）下载

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

（2）我的项目是vue-cli3创建，在vue.config.js中添加如下

configureWebpack: config => {
    // 生产环境下使用gzip
    if (process.env.NODE_ENV === 'production') {
      const CompressionWebpackPlugin = require('compression-webpack-plugin')
      // 增加浏览器CPU（需要解压缩）， 减少网络传输量和带宽消耗 （需要衡量，一般小文件不需要压缩的）
      // 图片和PDF文件不应该被压缩，因为他们已经是压缩的了，试着压缩他们会浪费CPU资源而且可能潜在增加文件大小。
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]', // asset -> filename
          algorithm: 'gzip',
          test: /\.(js|css)$/,
          threshold: 10240, // 达到10kb的静态文件进行压缩 按字节计算
          minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
          deleteOriginalAssets: false // 是否删除压缩的源文件
        })
      )
    }
  }

（3）在服务器的nginx配置文件（即nginx.conf）中添加：

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

位置如下图

（4）然后别忘记重启一下nigix

./nginx -s reload

（5）然后vue项目再打包下上传。

然后重点来了，下载完gzip再打包时可能会有些坑：

问题1

build时报错

Cannot read property ‘tapPromise‘ of undefined

compression-webpack-plugin版本问题
解决方法：

1.卸载

npm uninstall compression-webpack-plugin

2.安装5.01

npm i compression-webpack-plugin@5.0.1

问题2

报错

npm ERR! Unexpected string in JSON at position 147364 while parsing xxx

解决方法：
1.删除 package-lock.json 文件
2.重新 npm install

-------------------------------------------- END --------------------------------------------

一套下来 从18s > 6s多。
虽然没有达到“秒开”，但比以前还是强了很多。