精华内容
下载资源
问答
  • VUE 首屏加载时间优化

    2019-05-13 11:03:07
    Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。 解决方法是,将...

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。

    解决方法是,将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。

    外部的库文件,可以使用CDN资源,或者别的服务器资源等。

    下面来介绍几种方式:

    1.大文件定位

    我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件。

    安装

    npm install --save-dev webpack-bundle-analyzer

    在webpack中设置如下,然后npm run dev的时候会默认在浏览器上打开

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    module.exports = {
      plugins: [
        new BundleAnalyzerPlugin()
      ]
    }
    

    在这里插入图片描述
    2.JS文件按需加载

    如果没有这个设置,项目首屏加载时会加载整个网站所有的JS文件,所以将JS文件拆开,点击某个页面时再加载该页面的JS是一个很好的优化方法。

    这里用到的就是vue的组件懒加载。在router.js中,不要使用import的方法引入组件,使用require.ensure。

    import index from '@/components/index'
    const index = r => require.ensure([],() => r(require('@/components/index'),'index'))
    // 如果写了第二个参数,就打包到该`JS/index`的文件中
    // 如果不写第二个参数,就直接打包在`JS`目录下。
    const index = r => require.ensure([],() => r(require('@/components/index')))
    

    3.将JS文件放在body的最后

    默认情况下,build后的index.html中,js的引入实在是在head中,使用html-webpack-plugin插件,将inject的值改为body。就可以将js引入放到body最后。

    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    new HtmlWebpackPlugin({
    
    inject:'body'})
    

    4.使用cdn

    打包时,把vue、vuex、vue-router、axios等,换用国内的bootcdn直接引入到根目录的index.html。

    在webpack设置中添加externals,忽略不需要打包的库。

    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      externals:{
        'vue':'Vue',
        'vue-router':'VueRouter',
        'vuex':'Vuex'
      },
      // 格式为'aaa':'bbb',其中,aaa表示要引入的资源的名字,
      bbb表示该模块提供给外部引用的名字,由对应的库自定。例如,vue为Vue,
      vue-router为VueRouter
    

    在index.html中使用cdn引入

    <script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
    <script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> 
    <script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
    

    去掉原有的引用,否则还是会打包

    //去掉import,如:
    //import Vue from 'vue'//import Router from 'vue-router'
    //去掉Vue.use(XXX),如:
    //Vue.use(Router)
    

    5.压缩代码,移除console
    使用UglifyJsPlugin插件来压缩代码和移除console

    new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console:true,
              pure_funcs:['console.log']
            }
          },
          sourceMap: config.build.productionSourceMap,
          parallel: true
        }),
    
    展开全文
  • 使用CDN加载公用库,使用强缓存和协商...非重要的库、非首屏图片延迟加载,SPA的组件懒加载等; 2. 减少请求内容的体积 开启服务器Gzip压缩,JS、CSS文件压缩合并,减少cookies大小,SSR直接输出渲染后的HTML等; 3. 浏

    1. 加速或减少HTTP请求损耗
    使用CDN加载公用库,使用强缓存和协商缓存,使用域名收敛,小图片使用Base64代替,使用Get请求代替Post请求,设置 Access-Control-Max-Age 减少预检请求,页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等;
    2. 延迟加载
    非重要的库、非首屏图片延迟加载,SPA的组件懒加载等;
    2. 减少请求内容的体积
    开启服务器Gzip压缩,JS、CSS文件压缩合并,减少cookies大小,SSR直接输出渲染后的HTML等;
    3. 浏览器渲染原理
    优化关键渲染路径,尽可能减少阻塞渲染的JS、CSS;
    4. 浏览器渲染原理
    白屏使用加载进度条、菊花图、骨架屏代替等;

    展开全文
  • 单页面应用的一个问题就是首页加载东西过多,加载时间过长。特别在移动端,单页面应用的首屏加载优化更是绕不开的话题,这篇文章主要介绍了vue项目首屏加载时间优化实战,感兴趣的小伙伴们可以参考一下
  • 前言 事实上, 只有10%-20%的最终用户响应...在这篇博客中,我根据工作中的实际项目经验和一些测试的经验中总结出了前端页面在性能上优化方案。其中一些经验吸收自《高性能网站建设指南》Steve Souders 著 电子工业...

    前言

    事实上, 只有10%-20%的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩余80%-90%的最终用户体验。
    –Steve Souders

    在这篇博客中,我根据工作中的实际项目经验和一些测试的经验中总结出了前端页面在性能上优化方案。其中一些经验吸收自《高性能网站建设指南》Steve Souders 著 电子工业出版社。

    一、 代码相关优化

    1. 将样式表放在首部-使用link标签将样式表放在文档的HEAD中

    • 遵循HTML规范,将样式表放在头部,可以有效避免白屏无样式内容的闪烁
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title></title>
      <!-- 使用link标签将样式表放在文档的HEAD中 -->
      <link rel="stylesheet" href="example.css">
    </head>
    
    <body></body>
    
    </html>
    
    

    2. 将脚本放在底部

    • 将脚本放在顶部会造成的影响: 脚本阻塞对其后面内容的显示; 脚本会阻塞对其后面组件的下载;

    • 将脚本放在底部</body>标签之前, 类似于document.body.appendChild(yourScript), 不会阻塞页面内容的呈现,而且页面中的可视组件可以尽早下载。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title></title>
      <link rel="stylesheet" href="example.css">
    </head>
    
    <body>
      <!-- 将脚本放在底部 -->
      <script src="example.js"></script>
    </body>
    
    </html>
    

    3. 减少HTTP请求

    1) CSS Sprites (雪碧图)

    多个图片合成一张图片,通过background-position来定位所需要的图片。每次请求的话只需要请求一张图片减少http请求。(如果使用图标的话建议使用svg,也可以使用iconfont)

    本地工具:

    在这里插入图片描述

    在线工具:

    在这里插入图片描述

    2) 内联图片和脚本

    • 通过内联图片和脚本无需额外的HTTP请求,图片小于10K的可以设置内联为base64位。
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4SUJRXhpZgAATU>
    

    3) 合并脚本和样式表

    • 一般来说,使用外部脚本和样式表对性能更有利,然而如果将模块化的代码分开放到多个小文件中,会降低性能,每个文件都会导致一个额外的HTTP请求

    4. 使用外部Javascript和css

    Good

    <link rel="stylesheet" href="example.css">
    
    <script src="example.js"></script>
    

    bad

    <style>
    // code
    </style>
    
    <script>
    // code
    </script>
    
    • 使用外部Javascript和Css的主要作用有: 可以配置缓存 有利于组件重用

    5. 使用CDN (内容分发网络 Content Delivery Network)

    CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡内容分发调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储分发技术。–摘自百度百科

    6. 代码压缩

    1) Gzip 压缩

    gzip压缩可以节省50%-70%的网络开销

    浏览器支持的压缩类型可以通过network的Accept-Encoding: gzip, deflate来查看。支持deflate的浏览器也支持gzip,但很多浏览器支持gzip却不支持deflate,因此gzip是最理想的压缩方法

    • node端 使用compression如果是webpack项目可以看下面的Vue首屏加载时间优化方案里的gzip压缩
    // npm install compression --save-dev
    const compression = require('compression')
    

    2) 代码压缩

    前端打包压缩的有grunt,gulp,webpack,可以对HTML,CSS,Javascript代码压缩

    二、 服务器相关优化

    本文中使用nginx服务器进行相关配置,使用apache同样可以做到相关优化,具体操作请另Google

    1. 开启gzip压缩

    • 服务端配置gzip压缩
    gzip on; # 开启Gzip
    gzip_static on; # 开启静态文件压缩
    gzip_min_length  1k; # 不压缩临界值,大于1K的才压缩
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";
    
    • 我的服务器nginx相关的配置:

    在这里插入图片描述

    2. 开启HTTP2

    HTTP2在前端性能上主要表现在:请求和响应的多路复用、头部压缩

    • 感受下多路复用

    在这里插入图片描述

    nginx服务器配置HTTP2

    在这里插入图片描述

    3. 开启缓存

    添加Expires头(强缓存)

    个人站点相关配置

    在这里插入图片描述

    nginx配置

    location ~.*\.(svg|woff|js|css){
    	root /yourFilePath;
    	expires 1d;
    }
    
    • Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本,直到指定的时间为止 HTTP规范中简要地称该头为“在这一日期时间之后,响应将被认为是无效的”。它在HTTP响应中发送
    expires: Thu, 30 May 2019 20:51:42 GMT
    
    • 上面的Expires头告诉浏览器该响应的有效性持续到2019年5月30日为止。如果为页面中的一个图片返回了这个头,浏览器在后续的页面浏览中会使用缓存的图片,将HTTP请求的数量减少一个

    Max-Age和mod_expires

    • 个人站点的css文件使用强缓存cache-control: max-age

    在这里插入图片描述

    • nginx配置
    server {
        add_header Cache-Control max-age=72000;
    }
    
    • 在解释缓存如何很好地改善传输性能之前,需要提及除了Expires 头之外的另一种选择。HTTP 1.1引入了Cache-Control头来克服Expires头的限制

    • 因为Expires头使用一个特定的时间,它要求服务器和客户端的时钟严格同步。另外,过期日期需要经常检查,并且一旦未来这天到来了,还需要在服务器配置中提供个新的日期。

    • Cache-Control使用max-age指令指定组件被缓存多久, 如果从组件被请求开始过去的秒数少于max-age,浏览器就使用缓存的版本,这就避免了额外的HTTP请求。一个长久的max-age头可以将刷新窗设置为未来10年

    Cache-Control: max-age=315360000
    
    • Expires 和Cache-Control max-age.如果两者同时出现,HTTP规范规定max-age指令将重写Expires头

    • 建议使用Cache-Control max-age,如果使用expires你需要担心它带来的时钟同步配置维护问题。

    配置ETag(协商缓存)

    Vue官方文档的Expires相关配置

    在这里插入图片描述

    浏览器必须产生这个HTTP请求,执行有效性检查, 但这仍比简单地下载所有已过期的组件效率要高(对比强缓存)。如果浏览器缓存中的组件是有效的(即它能够和原始服务器上的组件相匹配),原始服务器不会返回整个内容,而是返回一个304 Not Modifed状态码。

    附:Vue首屏加载时间过长详细优化方案

    • 首先附一张优化过后的图

    • 首屏加载时间从原来的10s2s,测试的个人站点

    在这里插入图片描述

    在这里插入图片描述

    注:我在优化vue项目的时候使用的是vue@2.6.6, vue-cli@3.4。 如果是cli2的项目影响也不大,优化的方案是结合服务端和webpack的。

    vue-cli脚手架默认配置已经大幅度优化了前端整体的性能,在此基础上,我又使用了三个优化项增加了大幅度提升

    1. gzip压缩

    • 结合服务器相关优化第一条:开启gzip压缩

    • 下面是前端项目中vue.config.js中的配置

    // 需要 npm install compression-webpack-plugin --save-dev
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    // 定义当前环境
    const ENV = process.env.NODE_ENV || 'development'
    
    module.exports = {
    	configureWebpack: config => {
    		// 如果是生产环境的话,开启压缩
    		if (ENV === 'production') {
    			//  参数配置文档: https://www.webpackjs.com/plugins/compression-webpack-plugin/
    			config.plugins.push(new CompressionWebpackPlugin({
    				algorithm: 'gzip',
    				test: /\.(js|css|html)$/,
    				threshold: 10240,
    				minRatio: 0.8
    			}))
    		}
    	}
    }
    

    2. 使用CDN内容分发网络

    index.html文件中通过环境来判断是否引入cdn文件,在vue.config.js文件中webpack通过环境判断是否使用cdn引入文件的全局变量

    • 使用CDN需要在webpackindex.html进行相关配置

    第一步 配置vue.config.js,只需要在刚才配置Gzip压缩的基础上再加一段代码

    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    const ENV = process.env.NODE_ENV || 'development'
    
    module.exports = {
    	configureWebpack: config => {
    		if (ENV === 'production') {
    			config.plugins.push(new CompressionWebpackPlugin({
    				algorithm: 'gzip',
    				test: /\.(js|css|html)$/,
    				threshold: 10240,
    				minRatio: 0.8
    			}))
                // 配置externals就是当使用CDN进入的js文件在当前项目中可以引用
                // 比如在开发环境引入的vue是import Vue from 'vue', 这个大写的Vue就是对应的下面的大写的Vue
    			config.externals = {
    			  'vue': 'Vue',
    			  'vue-router': 'VueRouter',
    			  'axios': 'axios'
    			}
    		}
    	}
    }
    

    第二步 配置index.html,在body里使用EJS语法判断是否为生产环境

    <body>
      <div id="app"></div>
      <% if (NODE_ENV === 'production') { %>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
      <% } %>
    </body>
    

    3. 配置sourceMap

    • devtool | webpack中文网 你可以根据官网来对开发环境和生产环境进行详细配置

    • 当然也可以像我一样直接productionSourceMap: false干掉生产环境的sourceMap

    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    const ENV = process.env.NODE_ENV || 'development'
    
    module.exports = {
    	configureWebpack: config => {
    		if (ENV === 'production') {
    			config.plugins.push(new CompressionWebpackPlugin({
    				algorithm: 'gzip',
    				test: /\.(js|css|html)$/,
    				threshold: 10240,
    				minRatio: 0.8
    			}))
    			config.externals = {
    			  'vue': 'Vue',
    			  'vue-router': 'VueRouter',
    			  'axios': 'axios'
    			}
    		}
    	},
        // 禁用生产环境的sourceMap
        productionSourceMap: false
    }
    
    

    4. 使用HTTP2

    请参考服务端优化第二条

    结语

    前端性能优化至关重要,文中提及的是我认为比较重要的几点,以后遇到更好的方案会补充进来。当然你也可以在评论区留言我们一起探讨,有错误的地方欢迎指出。

    展开全文
  • vue首屏加载优化总结及整理

    千次阅读 2020-06-28 16:21:41
    基于vue的页面加载优化详谈,主要列举了部分优化的点,包括客户端以及服务端

     

    页面加载性能是一个老生常谈的问题,但是却异常重要,尤其在访问量大的商业软件中。但是有很多开发者在开发过程中压根就没有考虑过这个问题。大家在开发业务代码的过程中,也就忽略了这个增加工作量,也不会带来什么直观的工作内容。


    写在前面,这里以vue框架为例,基于vue-cli3的开发方式

    首先,使用webpack分析工具,查看当前项目的依赖,分析依赖及打包情况,对症下药

    安装插件

    npm i webpack-bundle-analyzer -D

    在vue.config.js中,添加如下配置:

    chainWebpack: (config)=>{
        /* 添加分析工具*/
        if (process.env.NODE_ENV === 'production') {
          if (process.env.npm_config_report) {
            config
              .plugin('webpack-bundle-analyzer')
              .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
              .end()
            config.plugins.delete('prefetch')
          }
        }
    
        ...
      }

    执行命令

    npm run build --report

    执行成功后,浏览器会打开一个窗口,显示当前依赖的大小及各打包文件情况

    结合自己的项目情况,分析依赖的引入及打包情况,有以下几点优化方式

    第一,路由懒加载。

    查看打包目录中,js文件夹下的chunk-哈希值的文件为采用懒加载形式时生成的文件,一个路由会生成一个文件。

    const home= () => import('@/pages/home/index.vue')

    第二,使用CDN引入第三方依赖。

    比如,直接引入ehcarts会发现占打包文件较大的空间,如果项目没有特殊要求,可以采用CDN的方式引入;其他诸如axios、vue、lodash等都可以采用这种方式。

    • 在index.html中引入CDN资源
    ...
      <body>
        <div id="app">
        </div>
        <!-- built files will be auto injected -->
        <script src="//cdn.bootcss.com/echarts/4.2.1/echarts.simple.min.js"></script>
      </body>
      ...
    • 修改vue.config.js配置文件
    module.exports = {
        configureWebpack: {
          externals: {
            'echarts': 'echarts' // 配置使用CDN
          }
        }
       }

    externals中的key是用于import,value表示的在全局中访问到该对象,就是window.echarts

    在vue中使用echarts的时候无需 import echarts,可直接使用

    第三,按需加载第三方类库

    比如,项目中使用了 lodash 库,如果不是大量使用里面的方法的话,可以这样引入

    import _cloneDeep from 'lodash/difference' // 或者 const _cloneDeep = require('lodash/difference')
    const o = _cloneDeep ({a: 1, b: 2}) 

    也可以借助第三方插件的形式,lodash-webpack-plugin和babel-plugin-lodash。

    在使用中还是采用原有的 import _ from 'lodash'方式,只是借助插件,在打包时webpack会根据使用的方法按需打包

    先安装依赖

    npm install lodash-webpack-plugin babel-plugin-lodash -D

    上述插件可能部分已经存在于项目中,可以根据实际删除

    接着修改 vue.config.js

    
    const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
    
    module.exports = {
      configureWebpack: config => {
         if (process.env.NODE_ENV === 'production') {
            return{
               plugins: [
                  new LodashModuleReplacementPlugin(), //优化lodash
               ]
            }
         }
      }
    };

    附:使用 IgnorePlugin 插件优化 moment.js

    
    const webpack = require('webpack');
    
    module.exports = {
      configureWebpack: config => {
         if (process.env.NODE_ENV === 'production') {
            return{
               plugins: [
                  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // 忽略/moment/locale下的所有文件
               ]
            }
         }
      }
    };

    按需引入 element-ui,参见官方文档即可,其他组件库类似

    注:如果是按需一次性在main.js中引入,虽然比全部引入要小一些,但是也会一定程度上影响首次加载,这个看项目而行吧。

    按需引入后element-ui小了很多,不过看到文章开头的图上显眼的 table.js后想到, table组件只有后台管理页面用到了,不需要全局注册,所以我们删除 main.js中 Table和 TablColumn的引用,并在后台组件中局部注册。

    这里处理的思路就是,将按需引入处理到极致。如果是对首屏要求很高,可以采用这种方式,哪里用到哪里才引用,这其实也是平时开发中的一种良好习惯。

    chunk.venders.js 。如果是文件为第三方依赖的打包后文件,在做完这些优化之后,会发现这个文件有显现的减小。

    第四,打包时去掉sourceMap文件

    修改 vue.config.js 配置

    module.exports = {
      productionSourceMap: false
    }

    第五,将静态资源使用cdn加载

    将项目中的静态资源js css等放在oss服务器或者其他地方,减小服务器压力

    第六,开启 gzip压缩

    我在项目中启用压缩后,文件大小减少了70%以上,优化效果十分明显。

    下图是在简单做了部分优化之后的加载过程(优化开始时忘了截图),耗时8s以上。服务器端配置以 nginx 为例

    如果 Nginx 服务器开启 gzip,会将静态资源在服务端进行压缩,压缩包传输给浏览器后,浏览器再进行解压使用,这大大提高了网络传输的效率,尤其对 js,css 这类文本的压缩,效果很明显。

    客户端

    安装依赖

    npm i -D compression-webpack-plugin

    修改 vue.config.js 配置

    const path = require('path')
    const CompressionPlugin = require('compression-webpack-plugin')
    
    module.exports = {
     ...
      configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          return {
            plugins: [
              new CompressionPlugin({
                test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
                threshold: 10240, // 归档需要进行压缩的文件大小最小值,这里是10K以上的进行压缩
                deleteOriginalAssets: false // 是否删除原文件
              })
            ]
          }
        }
      }
    }
    

    打包后,查看js文件

    可以看到所有文件都被压缩了三分之二以上

    在服务器我们也要做相应的配置

    # 开启|关闭 gzip。
    gzip on|off;
    # 文件大于指定 size 才压缩,以 kb 为单位。
    gzip_min_length 10;
    # 压缩级别,1-9,值越大压缩比越大,但更加占用 CPU,且压缩效率越来越低。
    gzip_comp_level 2;
    # 压缩的文件类型。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
    # 开启后如果能找到 .gz 文件,直接返回该文件,不会启用服务端压缩。
    gzip_static on|off
    # 是否添加响应头 Vary: Accept-Encoding 建议开启。
    gzip_vary on;
    # 请求压缩的缓冲区数量和大小,以 4k 为单位,32 为倍数。
    gzip_buffers 32 4K;

    注:遇到服务端开启gzip后,并没有生效的问题,发现是nginx配置压缩文件类型时 application/x-javascript,如果是这样的写法则并不会生效。

    JavaScript的MIME类型通常为“application/x-javascript”, 非IE的浏览器认“application/javascript”,

    所以在上述配置中 application/javascript 和 application/x-javascript 并用,可以解决该问题。

    然后重启nginx服务

    systemctl restart nginx.service

    当在请求中出现如下标识,即开启成功

    再对比一下资源加载时间

    前者为启用压缩前,后者为压缩后,时间从8.33s减少到了2.44s,效率提高了70%以上

    第七,冗余代码

    打包文件 app.哈希.js 中为所有vue文件打包的集合。

    基于此,把项目中的冗余代码,注释的多余代码删除一通后,你会发现文件会变小。

    可能人就是这样,在项目中觉得多几行css 多几个标签觉得不会对页面产生什么影响,但是如果做一通优化之后看到了‘数字性’的减少,才会思考编写高性能代码对加载性能的影响。

    第八,浏览器缓存

    浏览器缓存可以分为强缓存和协商缓存,根据实际应用场景来选择缓存方式或者结合使用。一般来讲一些基本不会变化的静态资源文件可以设置强缓存,更新频繁的文件不要设置缓存。而启用缓存的好处在于,在某个时间段内可以减少发送请求的数量,从而使页面响应更快,也就有更好的页面体验。

    基本原理:浏览器缓存分强缓存和协商缓存,他们是将网络资源存储在本地,等待下次请求该资源时,如果命中就不需要到服务器重新请求该资源,直接在本地读取该资源。

    • 强缓存:在web服务器返回的响应中添加Expires和Cache-Control Header
    • 协商缓存:通过【Last-Modified, If-Modified-Since】和【ETag, If-None-Match】两对Header分别管理

    关于缓存的详细介绍,推荐一篇文章,时空隧道

    第九,图片压缩

    图片压缩是常用的手法,因为设备像素点的关系,UI给予的图片一般都是 x2,x4的,所以压缩就非常有必要。

    第十,spilt chunks

    在没配置任何东西的情况下,webpack 4 就智能的帮你做了代码分包。入口文件依赖的文件都被打包进了main.js,那些大于 30kb 的第三方包,如:echarts、xlsx等都被单独打包成了一个个独立 bundle。

    其它被我们设置了异步加载的页面或者组件变成了一个个chunk,也就是被打包成独立的bundle。

    它实际分包的策略是这样的:

    • 新的 chunk 是否被共享或者是来自 node_modules 的模块
    • 新的 chunk 体积在压缩之前是否大于 30kb
    • 按需加载 chunk 的并发请求数量小于等于 5 个
    • 页面初始加载时的并发请求数量小于等于 3 个

    在实际项目中可以自行配置分包策略,示例如下:

    splitChunks({
      cacheGroups: {
        vendors: {
          name: `chunk-vendors`,
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial',
        },
        dll: {
          name: `chunk-dll`,
          test: /[\\/]bizcharts|[\\/]\@antv[\\/]data-set/,
          priority: 15,
          chunks: 'all',
          reuseExistingChunk: true
        },
        common: {
          name: `chunk-common`,
          minChunks: 2,
          priority: -20,
          chunks: 'all',
          reuseExistingChunk: true
        },
        elementUI: {
          name: 'chunk-elementUI', // split elementUI into a single package
          priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
        },
      }
    })
    

    也可以通过按需加载的形式进行分包,使得我们的包分散开,提升加载性能。

    推荐一篇文章:webpack按需加载

    第十,webpack配置

    另外webpack也有很多策略可以减少包的大小或者分包缓存的方式,结合浏览器缓存策略从而在更新包或用户访问时减少服务请求,体验优化

        // 指定环境变量
        // 当NODE_ENV未设置production为时,Vue.js会进行其他检查并显示警告,一些库基于此变量的行为会有所不同。
        // 这种检查和警告通常在生产中是不必要的,但是它们保留在代码中并增加了库的大小
        // 在webpack 4中,通过添加以下optimization.nodeEnv: 'production' 选项将其删除
        config.optimization.nodeEnv('production')
        // 压缩代码
        config.optimization.minimize(true)
    
        // it can improve the speed of the first screen, it is recommended to turn on preload
        // it can improve the speed of the first screen, it is recommended to turn on preload
        config.plugin('preload').tap(() => [{
          rel: 'preload',
          // to ignore runtime.js
          // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
          fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
          include: 'initial'
        }])
        // when there are many pages, it will cause too many meaningless requests
        config.plugins.delete('prefetch')
        // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
        config.optimization.runtimeChunk('single')

    webpack 的optimization.runtimeChunk这个配置项的具体作用是优化持久化缓存的。 runtime 指的是 webpack 的运行环境(具体作用就是模块解析, 加载) 和 模块信息清单, 模块信息清单在每次有模块变更(hash 变更)时都会变更, 所以我们想把这部分代码单独打包出来, 配合后端缓存策略, 这样就不会因为某个模块的变更导致包含模块信息的模块(通常会被包含在最后一个 bundle 中)缓存失效. optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来

    假设一个使用动态导入的情况,在`app.js`动态导入`component.js`

    const app = () =>import('./component').then();

    build之后,产生3个包。

    • `0.01e47fe5.js`
    • `main.xxx.js`
    • `runtime.xxx.js`

    其中`runtime`,用于管理被分出来的包。下面就是一个`runtimeChunk`的截图,可以看到`chunkId`这些东西。

    ...
    function jsonpScriptSrc(chunkId) {
    /******/         return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "." + {"0":"01e47fe5"}[chunkId] + ".bundle.js"
    /******/     }
    ...

    采用这种分包策略,当内容改变时可以将文件变化降到一个小文件的粒度。从而不必要更新整个文件,对于访问页面和更新文件都比较友好。更多官方策略讲述,点击这里

    推荐一篇webpack性能优化的文章,查看

    webpack压缩代码的文章,查看

    好啦,文章提到的优化方式基本就是这些,当然优化也不至于此,还有网络加载优化、页面渲染优化(动画、重排、重绘等)、浏览器文件缓存等等。如果有更好的优化方式欢迎评论。

    写在最后,页面优化本身是一件很抽象的工作,但是我们却可以通过平时的编码规范来促成更可靠的页面。优化的过程也是一个见仁见智的过程,要结合实际项目实际分析。优化的过程也会引发我们对于编码时的一些思考,原来这样写对页面加载会更友好,不知不觉中也能促进编写高可用的能力。

     

    展开全文
  • vue首屏加载优化

    2021-03-10 16:22:04
    1.异步路由加载 import Vue from 'vue' import Router from 'vue-router' // 之前的方案 // import Index from '@/pages/index/' // import ChooseUser from '@/pages/detail/chooseUser' // 异步加载方案 const ...
  • Vue 首屏加载速度优化-这篇就够了

    万次阅读 2019-06-22 18:17:54
    Vue-cli上线首屏加载优化vue项目首页加载速度慢的有效优化1.影响加载速度的原因2.分析文件大的原因利用webpack-bundle-analyzer 分析器,分析项目依赖关系3.项目依赖优化---插入链接与图片如何插入一段漂亮的代码...
  • 主要介绍了vue-cli项目优化 缩短首屏加载时间,需要的朋友可以参考下
  • 使用vue构建项目首屏加载时,出现加载慢,白屏的问题解决方案: 步骤一 webpack来打包vue项目,vendor.js过大问题解决 1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯...
  • Vue优化首屏加载

    2018-06-08 14:17:00
    背景: ...然后就开始了网上一大堆'vue首屏加载'的搜索... 经过初步优化,终于加载从开始的15S多到现在的不到4S,且看一步一步来... 性能测试工具: Pingdom https://tools.pingdom.com/ 优化...
  • 优化之后 首屏加载速度在1.2秒左右,当然还有优化空间,后期还可以考虑做个骨架屏,loading什么的提高用户体验 优化方案 优化之前下载webpack-bundle-analyzer webpack-bundle-analyzer 是 webpack的可视化资源...
  • 一、vue首屏加载过慢的原因 毋庸置疑的,网速慢肯定会导致首屏加载过慢,但是在这里我们不做讨论; vue项目作为一个单页面应用,如果不对路由进行处理,在加载首页的时候,就会将所有组件全部加载,并向服务器请求...
  • 特别在移动端,单页面应用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步。 我的项目vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax...
  • Vue首屏加载提升

    2020-04-29 20:44:45
    在没有进行优化之前,我的网站加载js文件需要25s,这大大的降低了其他人访问我网站的兴趣,所以适当的优化是不可少的。 优化点一 压缩成gzip格式: 安装插件 npm install --save-dev compression-webpack-plugin vue...
  • vue项目首屏加载优化

    2021-03-08 20:31:35
    我们习惯用vue-cli搭建脚手架,再配合vue-router控制路由,vuex控制状态及复杂组件通讯,实现顺畅的spa应用,但是往往在项目应用插件框架时后首屏加载时间非常长。故此可做一些优化

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,688
精华内容 1,475
关键字:

优化vue首屏加载时间

vue 订阅