前端页面加载加速

影响页面加载有很多，可以借助chrome performance 工具进行分析找具体原因

资源太大

打包后的js 、css、font等资源过大影响加载速度，可以通过压缩来提速。 借助compression-webpack-plugin对资源进行gzip压缩

• 安装

npm i -D compression-webpack-plugin

• 使用

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

module.exports = {
  plugins: [
    new CompressionPlugin(...options)
  ]
}

nginx层开启gzip压缩

    gzip on;                      // on为启用，off为关闭
    gzip_buffers        16 8k;    // 获取多少内存用于缓存压缩结果，‘16 8k’表示以8k*16为单位获得
    gzip_comp_level     4;        // gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，一般取中间值
    gzip_http_version   1.0;      // 识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
    gzip_min_length     1280;     // 设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取
    gzip_types          text/plain text/css text/xml application/x-javascript application/xml    // 对特定的MIME类型生效,其中"text/html"被系统强制启用 application/xml+rss application/json application/javascript text/*;
    gzip_vary           on;       // 启用应答头 Vary: Accept-Encoding

压缩后可以提升页面加载速度