compression-webpack-plugin首屏加载优化

从图片中可以看出，首屏的加载时间提升了很多，从5.55s提升到了578ms，这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。

一、插件打包.gz文件

1.安装：

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

或者

yarn add compression-webpack-plugin --save-dev

2.在vue.config.js中配置插件:

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'configureWebpack: {
    name: name,resolve: {
    alias: {
    '@': resolve('src')}},plugins: [// Ignore all locale files of moment.jsnew webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),// 配置compression-webpack-plugin压缩new CompressionWebpackPlugin({
    algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8}),new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 5,minChunkSize: 100})],},

3.打包

打包文件大小信息：

二、nginx配置

server{
    gzip on;gzip_buffers 32 4K;gzip_comp_level 6;gzip_min_length 100;gzip_types application/javascript text/css text/xml;gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）gzip_vary on;
}

三、tomcat配置

如果用的不是nginx，而是tomcat，那么需要去tomcat的config文件中去修改：

<Connector port="8080"protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443"compression="on"compressionMinSize="2048"useSendfile="false"noCompressionUserAgents="gozilla, traviata"compressableMimeType="text/html,text/xml,text/javascript,
application/javascript,text/css,text/plain,text/json"/>

compression=“on” 开启压缩。可选值："on"开启，"off"关闭，"force"任何情况都开启。