Vue访问过慢问题解决

1、组件使用懒加载

component: resolve => require(['../components/common/Home.vue'], resolve)

2、Gzip进行压缩

压缩前 访问时间将近8秒

image.png

开启Nginx压缩，在nginx.conf的http中加入以下代码 (nginx安装教程：http://www.hsshy.com/#/blog/detail/00qhyABC)

gzip on;#开启或关闭gzip on off　　 
gzip_static on;#是否开启gzip静态资源
gzip_min_length  5k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
gzip_buffers     4 16k;
#gzip_http_version 1.0;
gzip_comp_level 3;#压缩级别:1-10，数字越大压缩的越好，时间也越长 cpu损耗越大
gzip_types       text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;#  压缩文件类型
gzip_vary on;#跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"

重启nginx：service nginx restart

压缩后时间 访问时间只需不到2秒

image.png

3、Vue打包也进行gzip压缩

在devDependencies加入以下代码，进行npm install

"compression-webpack-plugin": "~1.1.11"

在config/index.js里的build加入以下代码，重新打包上传：npm run build

    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

压缩后时间 访问时间还是略有提升

image.png