Vue 笔记

最新推荐文章于 2023-12-21 13:13:47 发布

tianruine

最新推荐文章于 2023-12-21 13:13:47 发布

阅读量392

点赞数

文章标签：前端 npm node.js

本文链接：https://blog.csdn.net/m0_66195841/article/details/124740890

版权

移动端真机调试

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中直接注入动画和骨架屏的方式：
明天再给大家介绍通过插件的实现方式

注入加载动画

挂载节点注入动画骨架

<div id="app">
#注入的加载动画骨架
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>

2.注入动画样式

<style>
     .spinner {
      margin: 100px auto;
      width: 50px;
      height: 60px;
      text-align: center;
      font-size: 10px;
    }
 
    .spinner > div {
      background-color: #FE3C71;
      height: 100%;
      width: 6px;
      display: inline-block;
      -webkit-animation: stretchDelay 1.2s infinite ease-in-out;
      animation: stretchDelay 1.2s infinite ease-in-out;
    }
 
    .spinner .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
 
    .spinner .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
 
    .spinner .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
 
    .spinner .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
 
    @-webkit-keyframes stretchDelay {
      0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
      }
      20% {
        -webkit-transform: scaleY(1.0)
      }
    }
 
    @keyframes stretchDelay {
      0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }
      20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
      }
    }
</style>

效果如下:

注入骨架屏动画

挂载节点注入骨架

  <div id='app'>
   ### 在根节点注入骨架屏元素
    <div class="timeline-item">
      <div class="animated-background">
        <div class="background-masker header-top"></div>
        <div class="background-masker header-left"></div>
        <div class="background-masker header-right"></div>
        <div class="background-masker header-bottom"></div>
        <div class="background-masker subheader-left"></div>
        <div class="background-masker subheader-right"></div>
        <div class="background-masker subheader-bottom"></div>
      </div>
   </div>
  </div>

注入样式

 <style>
    .timeline-item {
      background: #fff;
      border: 1px solid;
      border-color: #e5e6e9 #dfe0e4 #d0d1d5;
      border-radius: 3px;
      padding: 12px;
      margin: 0 auto;
      max-width: 472px;
      min-height: 200px;
    }


    @keyframes placeHolderShimmer{
        0%{
            background-position: -468px 0
        }
        100%{
            background-position: 468px 0
        }
    }

    .animated-background {
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 40px;
        position: relative;
    }


    .background-masker {
        background: #fff;
        position: absolute;
    }

    /* Every thing below this is just positioning */

    .background-masker.header-top,
    .background-masker.header-bottom,
    .background-masker.subheader-bottom {
        top: 0;
        left: 40px;
        right: 0;
        height: 10px;
    }

    .background-masker.header-left,
    .background-masker.subheader-left,
    .background-masker.header-right,
    .background-masker.subheader-right {
        top: 10px;
        left: 40px;
        height: 8px;
        width: 10px;
    }

    .background-masker.header-bottom {
        top: 18px;
        height: 6px;
    }

    .background-masker.subheader-left,
    .background-masker.subheader-right {
        top: 24px;
        height: 6px;
    }


    .background-masker.header-right,
    .background-masker.subheader-right {
        width: auto;
        left: 300px;
        right: 0;
    }

    .background-masker.subheader-right {
        left: 230px;
    }

    .background-masker.subheader-bottom {
        top: 30px;
        height: 10px;
    }

    .background-masker.content-top,
    .background-masker.content-second-line,
    .background-masker.content-third-line,
    .background-masker.content-second-end,
    .background-masker.content-third-end,
    .background-masker.content-first-end {
        top: 40px;
        left: 0;
        right: 0;
        height: 6px;
    }

    .background-masker.content-top {
        height:20px;
    }

    .background-masker.content-first-end,
    .background-masker.content-second-end,
    .background-masker.content-third-end{
        width: auto;
        left: 380px;
        right: 0;
        top: 60px;
        height: 8px;
    }

    .background-masker.content-second-line  {
        top: 68px;
    }

    .background-masker.content-second-end {
        left: 420px;
        top: 74px;
    }

    .background-masker.content-third-line {
        top: 82px;
    }

    .background-masker.content-third-end {
        left: 300px;
        top: 88px;
    }
  </style>

效果如下:

tianruine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 笔记

移动端真机调试1. 将手机和电脑处于同一局域网2. 项目地址使用IP地址3. 将ip地址生成二维码手机扫码使用 qrcode 生成二维码或者网址草料网址二维码生成器上面操作就可以把自己做的项目进行真机测试移动端打印Vconsole在移动端也可以打印。东西测试，相当于PC端的console.log()操作：1.先找一个vconsole的CDN文件，直接引入就行，或者npm i vconsole2.然后再main.js里面导入，并使用就可以了im...
复制链接

扫一扫