Vue项目打开页面的速度提升优化

解决项目过大时第一次加载的资源文件很多

我的项目是在换了服务器过后发现首次加载的速度变得很缓慢。由于使用的npm安装的各种插件和框架比如element-ui，如果使用cdn方式引入各种包，我觉得修改起来比较麻烦。所以没有必要的话我推荐使用以下几种方式就能很大程度提示加载速度。

1. 在vue配置文件里取消.map文件并取消预加载文件的配置。
   map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
   有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
   2.取消js，css文件的预加载，在首次访问不去加载页面内的js，css文件。

module.exports = {
//取消打包文件dist里面的.map文件 
  productionSourceMap: process.env.NODE_ENV === 'development' ? true : false,
  
//取消引入css 的rel='preload'属性 取消文件的预加载  适用于引入文件较多的项目
  chainWebpack: config => {
    config.plugins.delete("prefetch") //取消预加载
  },
  }

使用Gzip来压缩打包后的文件

gzip 是一种对纯文本效果非常好的压缩算法，现在已经得到了绝大多数的服务端和客户端软件的支持。
vue使用 nginx gzip需要配合nginx服务器端配置，这一部分可以让后端配置就行。在nginx.conf里具体配置如下：

gzip on; 开启或关闭gzip on off
gzip_buffers 32 4k;
gzip_comp_level 5; 压缩等级，字数越大压缩越好，时间也长
gzip_static on; 表示使用已经压缩好的gz文件，根据请求 配合vue生成的gz文件
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

先vue项目中 安装插件 (没有淘宝镜像的使用npm)

cnpm install compression-webpack-plugin@6.1.1

然后在vue配置文件里加入以下配置

//首先引入插件
const CompressionWebpackPlugin = require('compression-webpack-plugin'); //引入插件
const productionGzipExtensions = ["js", "css", "json"]; //要压缩的文件类型

//初始化插件配置
module.exports={
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path][base].gz',
        algorithm: "gzip",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
        threshold: 10240, //对10K以上的数据进行压缩
        minRatio: 0.8,
        deleteOriginalAssets: false //是否删除源文件
      })
    ]
  },
}

配置好过后再打包，同样使用 npm run build

最终效果

去除预加载过后在浏览器看到首次不会加载过多的js文件。（如果本身文件就很少，不需要不使用）

通过gzip打包后的dist文件，可以看到js文件都多了一个压缩文件，文件大小也明显比原始文件小了很多。部署项目后，客户端（浏览器）会请求压缩后的资源，大大的提升加载速度
。
注意：gzip压缩的是打包后的文件，所以只能在线上服务器（生产环境）看到效果。