Vue 笔记

移动端真机调试

1. 将手机和电脑处于同一局域网

2. 项目地址使用IP地址

3. 将ip地址生成二维码手机扫码使用         qrcode 生成二维码  或者网址草料网址二维码生成器

上面 *** 作就可以把自己做的项目进行真机测试

移动端打印Vconsole

在移动端也可以打印。东西测试，相当于PC端的console.log()

*** 作：

1.先找一个vconsole的CDN文件，直接引入就行，或者npm i vconsole

2.然后再main.js里面导入，并使用就可以了

import VConsole from "vconsole";
//在new 的时候必须是开发环境
if (process.env.NODE_ENV === "development") {
  new VConsole();
} //现在在页面就可以输入打印了

查看现在是什么环境，是开发环境还是什么环境

console.log(process.env.NODE_ENV);

vue 前端项目优化

---

待优化项分析

打包项目资源分析

使用现在做主流的框架进行开发，大多都要经历打包这一过程,将核心代码和引入的第三方模块进行打包，但是往往会发现打包的结果不尽人意，在这里使用一个工具可以分析打包文件的构成.

可视化打包分析工具:webpack-bundle-analyzer

1.下载安装

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

vue.config.js 配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
    ...
    chainWebpack:(config)={
        if(process.env.NODE_ENV === 'production'&&process.env.npm_config_report){
            config
            .plugin('webpack-bundel-analyze')
            .use(BundleAnalyzerPlugin)
            .end()
        }
    }
}

配置启动指令 package.josn

{
    ...
    "scripts":{
        "report":"npm_config_report= true npm run build "
    }
}

使用

npm run  report  

通过该指令在打包的同时开启本地服务器可以浏览文件的构成

5.效果展示

网页运行效率分析

昨天我们介绍了，打包之后分析合并文件的构成模块的分析，通过分析我们可以将部分体积过大的第三方插件压缩或者替换成cdn,来减少包的体积大小,之后将可以将项目上传服务器上。

项目上传到服务器上之后,page性能的好坏，网络请求,图片加载，js代码执行,pwa优化，seo优化等等 这些都是我们前端开发工程师需要关注的问题，
在这里就推荐大家一个工具:lighthouse

Lighthouse分析web应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提高用户体验

该工具有两种使用方式

在chorme开发者工具中使用

    a. Lighthouse是直接集成到chrome开发者工具中的，位于‘Audits’面板下。

    b. 首先，你得下载安装 了chrome浏览器，相信每个做开发的人员都应该拥有chrome浏览器。
    
    c. 其次，在chrome浏览器中打开你需要测试的网站，按f12进入开发者调试模式，点击‘Audits’选项，

通过node集成到自己的项目配置里

a. 全局安装或者项目安装

$ npm install lighthouse -g 

b. 对网站进行检测生成分析报告

$ lighthouse https://www.baiud.com --view

这是最基本和用法 其他的配置参数大家可以参考npm:
npm-lighthouse

注:由于版本的原因请使用node v10 以上的版本

以下是对两个网站使用该工具的分析结果.
 

GZIP 压缩开启

之前我们通过 不同的分析工具分许出项目瓶颈所在，
今天开始一步一步优化项目项目出现的瓶颈，对于网页来说 打包结束之后 的体积也会会影响加载速度，
所以通过gzip压缩的方式来对文件体积进行在一步优化

Gzip压缩作用：将响应报⽂发送⾄客户端之前可以启⽤压缩功能，这能够有效地节约带宽，并提⾼响应⾄客户端的速度。

核心步骤：

打包同时产证gzip压缩文件减少服务器压力在服务器(nginx)开启gzip压缩

配置webpack

目的是build 打包的过程中同时产生 gzip压缩文件

在这里通过“compression-webpack-plugin”插件帮助进行压缩

const CompressionPlugin = require('compression-webpack-plugin')
# 插件引入
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
# 需要压缩的文件类型
module.export={
    ...,
 configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(new CompressionPlugin({
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
  }
}

打包结果1

打包结果2

修改nginx配置

目录: /etc/nginx/nginx.conf
注 该目录为ubuntu apt 安装nginx目录 其他系统自行寻找

gzip on;
# 开启nginx 压缩功能
gzip_static on;
# 检测本地是否有压缩过的文件
gzip_disable "msie6";
# 禁用gzip条件比如ie6 等低版本浏览器
gzip_vary on;
 #选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩
gzip_proxied any;
gzip_comp_level 6;
# 压缩等级 1-9以此压缩比增大
gzip_buffers 16 8k;
#   设置压缩缓冲区大小，此处设置为16个8K内存作为压缩结果流缓存
gzip_http_version 1.1;
#   压缩版本
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# 压缩类型

以下为压缩前后测试文件的加载时间对比

gzip压缩前

gzip压缩后

对比发现压缩效果拔群

尺寸从 477k -> 137k 30% 左右

加载时间 3.96s -> 409ms 9倍左右

用户体验优化

今天我们从用户体验的角度来分析以下如果提高我们的项目,核心反派还是我们经常遇到的首屏白屏问题，

大家可以先观察以下的三种白屏处理方案：

骨架屏特效中的王者(菊花)不处理

俗话说的好既要知其然又要知其所以然，我们需要优化首页白屏的问题 ，那么白屏问题如何出现的我们 要分析一波。

这里我们就不得不说 vue react 制造的spa应用的加载渲染过程:

下载index.html 解析下载样式文件解析下载js文件解析渲染显示

在这过程中首先是入口的html文件，因为里面只有一个
div 挂载元素 所以整个页面呈现白屏状态，直到vue或者react相关的js文件下载结束并且编译组件挂载到根元素上，这时候白屏结束渲染组件

说到这我们皆可以看出 :

白屏时间= 文件的下载时间 + 组件的解析渲染时间

通过gzip 压缩ssr等其他方式来来优化白屏时间，但是不管总怎么优化这段时间是依然存在的， 于是我们有了另一种优化的思路 “组件没有渲染加载之前我先显示一个过场动画，减少用户等待的焦虑，使得加载过程主观上变得流畅。”，而这也是骨架屏 菊花的实现思路

接下来给大家介绍2中直接注入动画和骨架屏的方式：
明天再给大家介绍通过插件的实现方式

注入加载动画

挂载节点注入动画骨架

#注入的加载动画骨架
  
    
    
    
    
    
  

2.注入动画样式

效果如下:

注入骨架屏动画

挂载节点注入骨架

  
   ### 在根节点注入骨架屏元素
    
      
        
        
        
        
        
        
        
      
   
  

注入样式

效果如下: