vue首屏加载优化(IIS开启GZIP功能)

vue 使用webpack开启gzip压缩，前端将文件打包成.gz文件

vue项目安装webpack

npm install webpack -g --全局安装webpack

vue.config.js文件添加一下代码

//vue.config.js
 configureWebpack:config => {
    if(process.env.NODE_ENV === "production"){
      return {
        plugins:[
          new CompressionPlugin({
            algorithm: 'gzip', // 使用gzip压缩
            test: /\.js$|\.html$|\.css$/, // 匹配文件名
            filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
            minRatio: 0.8, 
            threshold: 10240, // 对超过10k的数据压缩,一般都会选择大于1字节的进行压缩，小于1字节可能压缩后反而体积更大了
            deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
          }),
        ]
      }
    }
  },

使用gzip压缩效果

把打包好的静态文件部署在服务器，使用链接访问网页，发现加载时间需要十几秒

我的服务器是Windows,习惯使用IIS部署网站，以下为使用IIS开启GZIP

打开IIS管理工具，在右键网站打开网站属性，在服务选项卡中开启HTTP压缩，不建议选中压缩应用程序文件，但一定要选上压缩静态文件，不然就等于没有压缩，达不到负载均衡了。

1. 然后选中我那个站下面那个服务器扩展，新建一个服务器扩展，名字为GZIP，下面的添加文件路径为：c:\windows\system32\inetsrv\gzip.dll，然后启用这个扩展。
2. 我们要修改配置文件，在配置文件之前要停止IIS服务，（提醒大家一定要先关闭IIS服务）打开C:\Windows\System32\inetsrv\MetaBase.xml，这个文件很大，找到下面一段信息

<IIsCompressionScheme   Location ="/LM/W3SVC/Filters/Compression/gzip"
                

HcCompressionDll="%windir%\system32\inetsrv\gzip.dll"
            

HcCreateFlags="1"


            HcDoDynamicCompression="TRUE"
            

HcDoOnDemandCompression="TRUE"


            HcDoStaticCompression="TRUE"
            

HcDynamicCompressionLevel="6"
            

HcFileExtensions="htm

html

txtjscss"


            HcOnDemandCompLevel="10"
            

HcPriority="1"


            HcScriptFileExtensions="asp

dll

exe"

>


</IIsCompressionScheme>
<IIsCompressionScheme    Location ="/LM/W3SVC/Filters/Compression/deflate"
        HcCompressionDll="%windir%\system32\inetsrv\gzip.dll"
        HcCreateFlags="0"
        HcDoDynamicCompression="TRUE"
        HcDoOnDemandCompression="TRUE"
        HcDoStaticCompression="true"
        HcDynamicCompressionLevel="9"
        HcFileExtensions="htm
                     html
                     txt
                     js
                     css 
                     swf
                     xml"
        HcOnDemandCompLevel="9"
        HcPriority="1"
        HcScriptFileExtensions="asp 
            aspx
            dll
            exe"
    >
</IIsCompressionScheme>
<IIsCompressionScheme    Location ="/LM/W3SVC/Filters/Compression/gzip"
        HcCompressionDll="%windir%\system32\inetsrv\gzip.dll"
        HcCreateFlags="1"
        HcDoDynamicCompression="TRUE"
        HcDoOnDemandCompression="TRUE"
        HcDoStaticCompression="true"
        HcDynamicCompressionLevel="9"
        HcFileExtensions="htm
                     html
                     txt
                     js
                     css 
                     swf
                     xml"
        HcOnDemandCompLevel="9"
        HcPriority="1"
        HcScriptFileExtensions="asp 
            aspx
            dll
            exe"
    >
</IIsCompressionScheme>

修改这个文件是要增加一些要进行压缩的文件后缀，其中 HcFileExtensions 是静态文件的扩展名，增加 js 和 css 等；HcScriptFileExtensions 为动态文件的扩展名，增加 aspx，HcDynamicCompressionLevel改成9，（0－10，6是性价比最高的一个）。

重启一下IIS服务

服务端配置压缩环境后，再次访问网址，页面加载时间已经降低到了4秒多