vue 进行 gzip压缩和服务器如何开启gzip
使用vue-cli生成的项目,会自动配好相关的设置。 如下图找到对应的文件,productionGzip改为true,开启Gzip压缩 找到下图的文件,这里是Gzip的配置 代码如下:webpackConfig.plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]',algori...
·
使用vue-cli生成的项目,会自动配好相关的设置。
如下图找到对应的文件,productionGzip改为true,开启Gzip压缩
找到下图的文件,这里是Gzip的配置
代码如下:
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
// deleteOriginalAssets:true, //删除源文件,不建议
minRatio: 0.8
})
)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
这里是参数详细的解释CompressionWebpackPlugin
配置完毕后运行npm run build
,下面是压缩后文件
上传服务器后,发现js的Gzip压缩没有用,css的压缩是没问题的
修改服务器的配置,这里的服务器是Nginx
找到conf目录下的nginx.conf ,开启gzip,并设置gzip的类型,如下
gzip on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
- 1
- 2
重新部署服务器nginx -s reload
发现js也是压缩的后的文件了
更多推荐
已为社区贡献2条内容
所有评论(0)