IFORM平台如何提升页面打开速度

所有操作都是在打包构建之前修改配置；

一、开启gzip压缩机制

注意：所有操作都是在打包构建之前修改配置

1.1、修改配置文件

在IFORM平台中。修改.env文件

• 修改前VUE_APP_GZ = false
• 修改后VUE_APP_GZ = true

1.2、修改nginx配置开启gizp

    经过gzip压缩的包可以缩小约2/3体积，对网络传输的提升显著。开启gzip需要服务器的配合，以nginx为例，在nginx.conf中加入

server: {
    ...
    gzip on; # 是否开启gzip
    gzip_buffers 32 4K; #缓冲(压缩在内存中缓冲几块? 每块多大?)
    gzip_comp_level 6; #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源)
    gzip_min_length 100; #开始压缩的最小长度(再小就不要压缩了,意义不大)
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json; #对哪些类型的文件用压缩 如txt,xml,html ,css
    gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_vary on; #是否传输gzip压缩标志
}

说明：其他容器请百度

1.3、开启gizp说明：

这样，客户端请求文件时，服务器就会自动压缩文件。但是服务器的压缩是需要CPU开销的，为了节省CPU资源，我们可以在打包的时候同时打包一份gzip，配置如下
vue.config.js

  configureWebpack: config => {
    const configNew = {}
    if (process.env.NODE_ENV === 'production') {
      configNew.externals = externals
      if (enableGzip) { //是否开启gzip
        configNew.plugins = [
          // gzip
          new CompressionWebpackPlugin({
            filename: '[path][base].gz[query]',
            test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
            threshold: 10240,
            minRatio: 0.8,
            deleteOriginalAssets: false //是否删除原文件
          })
        ]
      }
    }
    return configNew
  }

二、开启第三方资源文件CDN加速

注意：所有操作都是在打包构建之前修改配置

2.1、修改配置文件

• 修改.env文件
• 修改前VUE_APP_CDN = false
• 修改后VUE_APP_CDN = true

2.2、配置CDN的第三方库

dependencies-cdn.js 配置需要CDN的第三方库

2.2.1 支持本地CDN和服务CDN (3.5.4+支持)

1. 修改环境配置文件.env

修改成需要环境

# CDN地址 服务地址:可选：unpkg[推荐]，cdnjs【太多包没】，jsdelivr【服务器挂了】，local【本地环境】
VUE_APP_CDN_PATH = 'local'

2. 配置CDN的第三方库
   dependencies-cdn.js

3. 配置复制本地的第三方库【local类型需要关注，其他类型忽略】
   copy-plugins.js

2.3、代码打包

npm run build

三、开启HTTP/2或多域名

参考文档：http://doc.ankepower.com/docs/iform-develop/iform-develop-1f9029fj5mmh8

3.1、方案一：HTTP/2

该方案服务器nginx 配置或其他容器

3.1、方案二：多域名

该方案修改配置文件config.js配置
http://doc.ankepower.com/docs/iform-develop/iform-develop-1febuclu78kio