Vue2.x学习笔记

# 性能优化

前言

总结一些项目开发中常见的优化技巧，优化的目的不仅能使代码结构更加清晰，加快开发编译速度，而且也能提高线上代码的性能

# 1.懒加载

# 2.虚拟滚动

# 3.整合模块

  • 多页应用中入口文件相同的配置需要整合







     
     
     
     
     
     






    // main.js
import Vue from "vue"
import App from "./index.vue"
import router from "./router"
import store from "@/store/"
import { Navigator } from "../../common"
if (process.env.NODE_ENV !== "production") {
  var VConsole = require("vconsole/dist/vconsole.min.js")
  var vConsole = new VConsole()
  Vue.config.performance = true
}
Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app")
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

  • 1.封装代码

    import { Navigator } from "../index"
export default (Vue) => {
  if (process.env.NODE_ENV !== "production") {
    var VConsole = require("vconsole/dist/vconsole.min.js")
    var vConsole = new VConsole()
    Vue.config.performance = true
  }
  Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter
}
    1
    2
    3
    4
    5
    6
    7
    8
    9

  • 2.多页中使用






     






    import Vue from "vue"
import App from "./index.vue"
import router from "./router"
import store from "@/store/"
import entryConfig from "_lib/entryConfig/"
entryConfig(Vue)
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app")
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

# 4.gzip 压缩

  • 在 webpack 生产环境中增加 Gzip 压缩配置,实现了打包后输出增加对应的.gz 为后缀的文件,减少文件传输大小，提高性能








     
     
     
     
     
     
     






    /* vue.config.js */
const isPro = process.env.NODE_ENV === 'production'
...
configureWebpack: config => {
  if (isPro) {
    return {
      plugins: [
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',// 目标文件名称。[path] 被替换为原始文件的路径和 [query] 查询
          algorithm: 'gzip',// 使用 gzip 压缩
          test: new RegExp('\\.(js|css)$'),// 处理与此正则相匹配的所有文件
          threshold: 10240,// 只处理大于此大小的文件
          minRatio: 0.8，// 最小压缩比达到 0.8 时才会被压缩
        })
      ]
    }
  }
}
...
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

  • 在 Nginx 开启 Gzip 压缩配置

    http {
  # 开启gzip
  gzip on;

  # 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
  gzip_min_length 1k;

  # gzip 压缩级别 1-10
  gzip_comp_level 2;

  # 进行压缩的文件类型。

  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;

  # 是否在http header中添加Vary: Accept-Encoding，建议开启
  gzip_vary on;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

# 5.webpack  的优化

  • 1.简化路径
    • 简化路径的好处：
      • 1.可以提高性能而且能够非常友好的对于开发者和协同人员进行阅读
      • 2.能避免使用../路径出错的风险（当页面大量拷贝文件到其他目录使用时相对路径会报错）
    • 案例参考:2.简化路径
  • 2.全局样式

# 5.1.开发环境中

  • HRM (热替换)

  • soure-map （调试）

  • size-plugin（监控打包资源的体积变量化）

  • speed-measure-webpack-plugin（分析 loader 和 plugin 打包的耗时）

  • webpack-bundle-analyzer（打包生成代码块分析视图）










     







    /* vue.config.js */
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const isPro = process.env.NODE_ENV === 'production'
module.exports = {
  ...
  configureWebpack: config => {
    if (isPro) {
      return {
        plugins: [
          new BundleAnalyzerPlugin()// 使用包分析工具
        ]
      }
    }
  },
  ...
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

# 5.2.生产环境中

  • 体积优化
  • css 提取（mini-css-extract-plugin）
  • css 压缩 （optimize-css-assets-webpack-plugin）
  • html 压缩 （html-webpack-plugin ）
  • externals （排除不需要被打包的第三方）
  • js 压缩 （production 模式自动开启）
  • tree-shake ( production 模式自动开启(webpack4 限 EsModule;webpack5 不限 EsModule,CommonJs,优秀得很) )
  • code-split ( optimization )
  • import(懒加载，预加载（预加载慎用））
  • 打包速度优化
  • 多线程打包（thread-loader 、happyPack）
  • 动态链 （ DLL ）
  • babel 缓存（ 缓存 cacheDirectory ）
  • exclude / exclude (排除一些不需要编译的文件)
  • module.noParse (排除不需要被 loader 编译的第三方库)

# 6.图片压缩

当图片比较大时（如：大于 1M）,可以先在压缩网站将图片体积压缩，然后使用 https://imagecompressor.com/zh/ (opens new window)

  • 缩略图
  • base64 压缩图片

# 7.keep-alive

<template>
  <div id="app">
    <keep-alive :include="includedComponents">
      <router-view></router-view>
    </keep-alive>
    <bottom-tab></bottom-tab>
  </div>
</template>
1
2
3
4
5
6
7
8

# 8.减少响应式数据

  • Object.freeze
new Vue({
  data: {
    // vue不会对list里的object做getter、setter绑定
    list: Object.freeze([{ value: 1 }, { value: 2 }]),
  },
  mounted() {
    // 界面不会有响应,因为单个属性被冻结
    this.list[0].value = 100

    // 下面两种做法，界面都会响应
    this.list = [{ value: 100 }, { value: 200 }]
    this.list = Object.freeze([{ value: 100 }, { value: 200 }])
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 减少 watch 数量，可以用一个 watch 进行深度监听一个对象数据

# 9.字体压缩

https://cloudconvert.com/ttf-to-woff2

总结

通过对 vue 相关性能优化的了解，可以知道项目中一些常见的需要优化的点，如提高项目构建速度的一些方式、提高页面载入速度的一些方式

← 代码管理 →