vue加载优化策略有哪些

vue加载优化策略有哪些

vue加载优化策略：1、路由懒加载；2、组件按需加载；3、使用CDN加速策略；4、使用【compression-webpack-plugin】将文件打包成gzip格式。

方法一、路由懒加载

首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面，而路由懒加载就是来解决这个问题的。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。下面这个就是vue路由懒加载的一个具体例子。方法很简单，如果您不想深入了解，只需按照这个格式引入路由就可以了。如果您对路由懒加载感兴趣，请移步vue-router路由懒加载

方法二、组件按需加载

为什么要按需加载组件呢？原因也很简单，一些组件库包含丰富的组件，如果我们直接将其引入，不免会引入一些我们压根用不到的组件。这样打包起来体积会比较大，同样显得我们很不专业。因此按需引入就显得很必要了。我们现在就拿iview组件库为例，了解一下按需引入的流程。

1.首先引入按需加载工具 babel-plugin-import

babel-plugin-import是babel它会在编译过程中将 import 的写法自动转换为按需引入的方式。

npm install babel-plugin-import --save-dev

2.在项目根目录创建.babelrc文件并配置按需加载内容

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "iview",
        "libraryDirectory": "src/components"
      }
    ]
  ]
}

3.在main.js配置项目需要加载的组件

下面是iview的一个例子

这里需要注意全局注册的组件需要挂在到vue原型上，例如我们需要使用Notice组件，那我就需要

Vue.prototype.$Notice = Notice;

这样我们就可以正常的使用iview的组件了。

方法三、使用CDN加速策略

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。外部的库文件，就可以使用CDN资源。vue cli3.x在配置cdn是和vue cli2.x有一些区别，vue cli在升级后，代码结构变化比较大，配置文件集成到了vue.config.js文件中。下面以amap、axios和qs为例讲述如何使用cdn加载资源。

1.在index.html中引入相关cdn资源

2.配置externals

vue cli3.x 配置webpack是在vue.config.js的configureWebpack中

配置完之后，我们就可以正常使用全局的Amap、axios和Qs了

方法四、使用compression-webpack-plugin将文件打包成gzip格式

compression-webpack-plugin这个依赖在npm run build是会生成.gz文件。之后项目访问的文件就是这个.gz文件，正常的项目打包体积会减少一半还要多，是不是很吊

下面我们来进一步讲述这个这个依赖的使用流程。

1.npm 引入

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

2.vue cli3.x在 vue.config.js配置webpack

3.nginx开启gzip模式

在上一步前端就已经配置好了，之后就是nginx配合开启gzip模式，这个比较简单，只要你对nginx有一点了解，我们在nginx.conf中的http中配置一些代码

nginx压缩功能

• Nginx开启Gzip压缩功能， 可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度, 进而优化Nginx性能!
• Gzip压缩作用：将响应报⽂发送⾄客户端之前可以启⽤压缩功能，这能够有效地节约带宽，并提⾼响应⾄客户端的速度。Gzip压缩可以配置http,server和location模块下。

配置详解

gzip on;                 #决定是否开启gzip模块，on表示开启，off表示关闭；
gzip_min_length 1k;      #设置允许压缩的页面最小字节(从header头的Content-Length中获取) ，当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时，所有页面都进行压缩。建议大于1k
gzip_buffers 4 16k;      #设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间,param2:int(k) 后面单位是k。这里设置以16k为单位,按照原始数据大小以16k为单位的4倍申请内存
gzip_http_version 1.1;   #识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
gzip_comp_level 2;       #设置gzip压缩等级，等级越底压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大；等级1-9，最小的压缩最快 但是消耗cpu
gzip_types text/plain application/x-javascript text/css application/xml;    #设置需要压缩的MIME类型,非设置值不进行压缩，即匹配压缩类型
gzip_vary on;            #启用应答头"Vary: Accept-Encoding"
gzip_proxied off;        #nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
gzip_disable msie6;      #(IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库

推荐配置

gzip on;						#开启gzip压缩功能
gzip_min_length 10k;			#设置允许压缩的页面最小字节数; 这里表示如果文件小于10个字节，就不用压缩，因为没有意义，本来就很小.
gzip_buffers 4 16k;			#设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存
gzip_http_version 1.1;			#压缩版本
gzip_comp_level 6;			#设置压缩比率，最小为1，处理速度快，传输速度慢；9为最大压缩比，处理速度慢，传输速度快; 这里表示压缩级别，可以是0到9中的任一个，级别越高，压缩就越小，节省了带宽资源，但同时也消耗CPU资源，所以一般折中为6
gzip_types text/css text/xml application/javascript text/plain application/x-javascript text/javascript text/xml;		#制定压缩的类型,线上配置时尽可能配置多的压缩类型!
gzip_disable "MSIE [1-6]\.";		#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_vary on;					#选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩

注意事项

• 图片类型资源 (还有视频文件)原因：图片如jpg、png文件本身就会有压缩，所以就算开启gzip后，压缩前和压缩后大小没有多大区别，所以开启了反而会白白的浪费资源。（可以试试将一张jpg图片压缩为zip，观察大小并没有多大的变化。虽然zip和gzip算法不一样，但是可以看出压缩图片的价值并不大）
• 大文件资源原因：会消耗大量的cpu资源，且不一定有明显的效果。

4.验证是否配置成功

这步就很简单了只需要查看chunk类文件的Response Headers的Content-Encoding是否是gzip即可

原文地址

https://www.php.cn/vuejs/464048.html
https://blog.csdn.net/wang_jing_jing/article/details/124250224