Vue项目部署后页面加载首次很慢的优化方案

Vue项目部署后页面加载首次很慢的优化方案
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

1.前言

将Vue项目打包后部署到服务器下的Nginx后,发现页面首次加载时会特别慢,甚至到了20s~30s,通过浏览器调试工具可以查看加载慢的资源文件,其中最主要的是js文件和一些图片。明确了导致加载慢的原因,下面总结了一些对这些资源文件加载的优化方案:

2.图片优化方案

1.直接将图片压缩到尽可能小、尽可能可以忍受的极限。

2.使用CDN加速资源,国内常见的CDN资源加速服务提供商如:七牛云;

3.将图片压缩为webp格式,兼容性不好。另外就是我在引入webp时编译出错,也就没做过多的探索了;

4.升级服务器带宽。

3.项目资源文件

1.去掉编译文件中map文件:
在项目打包好后,可以看到文件夹下有很多.map文件,这些文件主要是帮助我们进行线上代码调试,查看样式。为了避免部署包过大,通常都不生成这些文件。

webpack 构建的项目结构下,在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件

webpack-simple 构建的项目结构下,在webpack.config.js文件种将sourceMap的值设置为false。

以上参数可直接通过IDE的快捷搜索工具定位。

2.vue-router 路由懒加载:
这里只提供一种较常见的方法。它主要是使用了resolve的异步机制,用require代替了import,实现按需加载,下面是代码示例:

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
   
  routes: [

// {// 非懒加载
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// }
       {
   // 懒加载
         path: '/',
         name: 'HelloWorld',
         component: resolve => require(['@/components/HelloWorld'], resolve)
       }
  ]
}) 

通过懒加载后打包的js文件会很多,而非懒加载的打包后一般只有一个js文件。
3.使用gzip压缩:
首先安装compression-webpack-plugin:

cnpm install --save-dev compression-webpack-plugin@1.1.12

然后进行配置:

webpack 构建的项目结构下,在/config/index.js 下修改productionGzip 为true:在这里插入图片描述
然后 build/webpack.prod.conf.js 文件中添加配置:

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css'];
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
    
     filename: '[path].gz[query]',
     algorithm: 'gzip',
     test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
     threshold: 10240,
     minRatio: 0.8
   })
)

webpack-simple 构建的项目结构下,在webpack.config.js文件中添加配置,添加位置如下,内容与webpack构建下相同:
在这里插入图片描述
最后在Nginx配置开启zgip,在server上面添加:

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 16 64k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 3;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启       
gzip_vary on;

重启nginx(linux下):./nginx -s reload,发现js也是压缩的后的文件了
在这里插入图片描述

本文来源MrKorbin,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/25286

发表评论