您当前的位置: 首页 >  学无止境 >  文章详情

关于vue在首次加载时缓慢的解决办法,采用资源文件压缩的方式解决

时间: 2020-05-08 【学无止境】 阅读量:共1500人围观

简介 第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案,将资源文件压缩。

1.webpack优化 -- compression-webpack-plugin 开启gzip

// 安装插件 npm install --save-dev compression-webpack-plugin

2.找到vue.config.js,加入以下配置

const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css'] // vue.config.js module.exports = { configureWebpack: { plugins: [ // 配置compression-webpack-plugin压缩 new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 }) ] } }

3.配置nginx,加入配置如下

server { gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php _uploads/photos/jpeg _uploads/photos/gif _uploads/photos/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; }

vue项目打包:npm run build。
重启nginx:进入nginx可执行目录sbin下,输入以下命令即可。

// 重启命令 ./nginx -s reload
文章评论
总共 0 条评论
这篇文章还没有收到评论,赶紧来抢沙发吧~
Copyright (C) 2023- 小祥驿站 保留所有权利 蜀ICP备 17034318号-2  公安备案号 50010302004554