十二.性能优化

前言

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

1.简化路径

简化路径不仅可以提高性能、而且能够非常友好的对于开发者和协同人员进行阅读，而且还能避免使用../路径出错的风险

// vue.config.js
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
    ...
    resolve: {
        alias: {
            '@': resolve('src'), // 定义 src 目录变量
            assets: resolve('src/assets'), // 定义 assets 目录变量
        }
    },
    ...
}

在 less, sass, stylus 中，使用 @import "@/style/theme" 的语法引用目录确会报错。解决办法是是在引用路径的字符串最前面添加上 ~

@import "~@/style/theme.less" //css module中
background: url("~@/assets/xxx.jpg") // css 属性中
<img src="~@/assets/xxx.jpg"> //html 标签中

2.全局 sass 文件管理

全局样式文件进行全局引入

// vue.config.js
...
css: {
  sourceMap: false,
  loaderOptions: {
    scss: {
      additionalData: `
          @import "~@/assets/styles/norm.scss";
          @import "~@/assets/styles/mixins.scss";
        `
    },
    sass: {
      additionalData: `
          @import "~@/assets/styles/norm.scss"
          @import "~@/assets/styles/mixins.scss"
        `
    }
  }
}
...

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.封装代码

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
}

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")

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 时才会被压缩
        })
      ]
    }
  }
}
...

在 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;
}

5.webpack 的优化

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()// 使用包分析工具
        ]
      }
    }
  },
  ...
}

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/

7.压缩代码体积

7.1 html

vite.config.js

import { createHtmlPlugin } from 'vite-plugin-html';
...
createHtmlPlugin({
    minify: true,   // 是否压缩代码
    pages: [
        {    // 进行多页面打包配置
            filename: "index.html",     // 生成的文件名称
            template: "./index.html",   // 模板文件
            entry: "./src/main.ts",     // 打包入口文件
            // injectOptions: {            // 注入页面信息
            //     data: {
            //         title: "vite项目练习",
            //     }
            // }
        },
        {    // 进行多页面打包配置
            filename: "mobile.html",     // 生成的文件名称
            template: "./mobile.html",   // 模板文件
            entry: "./mobile/main.ts",     // 打包入口文件
            injectOptions: {            // 注入页面信息
                data: {
                    title: "vite",
                }
            }
        }
    ]
}),

index.html

html

<meta name="build-time" content="<%- buildTime%>">

7.2 js

7.3 css

总结

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

十二.性能优化 ​

1.简化路径 ​

2.全局 sass 文件管理 ​

3.整合模块 ​

4.Gzip 压缩 ​

5.webpack 的优化 ​

5.1.开发环境中 ​

5.2.生产环境中 ​

6.图片压缩 ​

7.压缩代码体积 ​

7.1 html ​

7.2 js ​

7.3 css ​