logo logo
奇特的一生
  • 首页
  • 归档
  • 项目
  • 导航
  • 留言
  • 关于
logo
  • 首页
  • 归档
  • 项目
  • 导航
  • 留言
  • 关于

TypeScript

正则表达式

Vue性能优化

发表于：2020-04-20
字数统计：4.5k 字
阅读时长：11 分钟
阅读量：415

以下的内容都是博主查阅资料结合实际项目总结出来的优化技巧，网上一些容易查到的，简单的，效果不是太显著的经验可能会忽略，当然，如果你想要达到极致体验的话，一些小的简单的细节在非常庞大的项目下也是会带来不错的效果，所以这里还是根据实际情况选择优化方案。

性能优化方向

压缩代码

减少 HTTP 请求

使用服务端渲染

开启 gzip 压缩

使用 CDN

使用 iconfont 代替图标

图片懒加载

对 DOM 查询进行缓存

节流

防抖

服务器硬盘的选择

用过电脑的同学都知道电脑硬盘分为机械硬盘和固态硬盘，机械硬盘对比固态硬盘要慢很多，其实服务器硬盘也分机械硬盘和固态硬盘（SSD），那么知道这个后我们在购买服务器时一定要选择带有SSD的硬盘，因为固态硬盘的读写性能要比机械硬盘快很多，就拿我自己的例子来说，我买过两个服务器一个机械硬盘服务器，一个固态硬盘服务器，在同样资源的情况下，固态硬盘在读取速度上要快机械硬盘好几倍，所以这里推荐使用固态硬盘服务器。

分析资源大小、加载速度等问题

1、可以通过浏览器的network

2、修改package.js中打包命令

在后面加上 --report

"build": "node build/build.js --report"

再次打包的时候会出现每一个文件的大小

注意点

资源分析时记得按ctrl+f5清除缓存

打包体积优化

未优化

包大小5.88M

优化后

包大小4.32M

我们在打包的时候不将第三方较大的一些资源打包，而通过引用第三方高速仓库中的cdn文件。

1、找到build/webpack.base.conf.js文件，在 module.exports = { } 中将不需要打包的文件添加进去。

externals: {
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts'
}

2、引用第三方高速仓库中的cdn文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>learn4perfect</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

这里我推荐使用的是jsdelivr这个仓库

https://www.jsdelivr.com/

CDN 的工作原理是将源站的资源缓存到位于全球各地的 CDN 节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每个用户的请求都回您的源站获取，避免网络拥塞、缓解源站压力，保证用户访问资源的速度和体验。

jsDelivr-开源CDN，免费，快速，可靠

那么如何使用这个东西呢？

假设我现在项目中element ui 这个资源文件很大，那我们先搜索element-ui这个库，然后点击进去是下面这样。

我们要替换的文件是 https://unpkg.com/element-ui/lib/index.js

通过对比我们要找的文件在lib目录下

找到文件后点击右边的图标，复制URL在html文件夹中通过script标签导入即可，其他大的第三方资源也可以使用这种方法。

gzip压缩

你可能会发现尽管在做了处理后vue打包后的vendor.js和app.js这些文件会比较大，那么我们启用gzip压缩来解决这个问题

先做一个对比

未压缩

压缩后

安装压缩插件

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

项目目录下config/index.js/

productionGzip: true // 开启gzip

gzip前端配置

webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp(
      '\\.(' +
      config.build.productionGzipExtensions.join('|') +
      ')$'
    ),
    threshold: 10240,
    minRatio: 0.8
  })
)

更多配置： https://www.webpackjs.com/plugins/compression-webpack-plugin/

配置好后打包，上传到nginx

nginx gzip性能优化

http {
    gzip on;
    gzip_disable "msie6"; 
    gzip_vary on; 
    gzip_proxied any;
    gzip_comp_level 5; #压缩级别
    gzip_buffers 4 16k;
    gzip_min_length 50k; #大于这个值开启压缩
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

重启nginx

cd nging/sbin
./nginx -s reload

验证是否成功

打开网站，选择一个文件查看Content-Encoding 如果为gzip则配置成功。

图片优化

图片在线压缩

https://tinypng.com/

单色icon 使用iconfont

http://www.iconfont.cn/

懒加载

npm install vue-lazyload --save-dev

使用插件
main.js 中使用:

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
  preLoad: 1.3, // 提前加载高度（数字 1 表示 1 屏的高度） 默认值:1.3
  error: './static/error.png',  //报错需要的图片
  loading:'./static/loading.png', // 替换需要的图片
  attempt: 3 //  加载错误后最大尝试次数 默认值:3
})
 
图片替换：
图片 src 修改为 v-lazy 
<img class="item-pic" v-lazy="newItem.picUrl"/>

图片存储地址

图片的大小对访问速度影响非常大，在没有上传到七牛云对象存储空间的时候，图片的访问是很慢的，上传之后基本上都是秒开，至于什么是对象存储空间，请找百度爸爸。

七牛云对象存储链接：https://www.qiniu.com/products/kodo

对象存储介绍

我的对象存储空间

最后做一下优化前后对比：

启动速度4s >>> 500ms

首屏request资源3.1M >>> 1.3M

到这里我相信可以满足大部分人的需求了，如果想做更极致的处理，可以通过chrome调试工具查看加载速度慢的资源，将这些资源上传到阿里云或者七牛云这样的对象存储空间里面。

Nice 熊猫眼+1


图片加载优化

  1. 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。
  2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
  3. 小图使用 base64 格式
  4. 将多个图标文件整合到一张图片中（雪碧图）
  5. 选择正确的图片格式：
  • 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
  • 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
  • 照片使用 JPEG

其它文件优化

  • CSS 文件放在 head 中
  • 服务端开启文件压缩功能
  • 将 script 标签放在 body 底部，因为 JS 文件执行会阻塞渲染。当然也可以把 script 标签放在任意位置然后加上 defer ，表示该文件会并行下载，但是会放到 HTML 解析完成后顺序执行。对于没有任何依赖的 JS 文件可以加上 async ，表示加载和渲染后续文档元素的过程将和 JS 文件的加载与执行并行无序进行。
  • 执行 JS 代码过长会卡住渲染，对于需要很多时间计算的代码可以考虑使用 Webworker。Webworker 可以让我们另开一个线程执行脚本而不影响渲染。

CDN

静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie。

使用 Webpack 优化项目

  • 对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩
  • 使用 ES6 模块来开启 tree shaking，这个技术可以移除没有使用的代码
  • 优化图片，对于小图可以使用 base64 的方式写入文件中
  • 按照路由拆分代码，实现按需加载
  • 给打包出来的文件名添加哈希，实现浏览器缓存文件
›
1/0