【性能优化】通用性优化

相关文章

• 性能检测
• 通用性优化
• vue项目优化
• react项目优化
• 怎样去优化Long Task

通用性优化

---

环境如下

• 打包环境：webpack

一、构建层面（减小体积）

代码分隔

将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，以便存到缓存中供后续使用。

webpack4以下

module.exports = {
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common' // 指定公共代码块的名称
        }),
    ],
};

webpack4以上（含）

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all', // 将所有模块包括在代码分割中，包括同步和异步加载的模块
        },
    },
};

摇树优化

删除项目中未被引用代码

• 使用 ES6 模块语法

• 配置 mode 为 production

  export default {
      // ...
      mode: "production"
  };

压缩代码

压缩输出的代码

webpack4以下

module.exports = {
    // 其他配置...
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false, // 禁用压缩过程中的警告信息
                drop_console: true, // 删除代码中的 console.log 语句
            },
            sourceMap: true, // 源映射文件，源映射文件可以将压缩后的代码映射回原始源代码，方便在浏览器开发者工具中调试压缩后的代码。在生产环境中，建议设置 sourceMap: true，以便进行线上错误的调试和定位。
        }),
    ],
};

webpack4以上（含）

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    // 其他配置...
    optimization: {
        minimize: true, // 开启代码压缩
        minimizer: [
        new TerserPlugin({
            terserOptions: {
                compress: {
                    drop_console: true, // 去除 console.log
                },
            },
        }),
        ],
    },
};

动态垫片(Polyfill)

通过垫片服务根据UA返回当前浏览器代码垫片

new HtmlTagsPlugin({
    append: false, // 在生成资源后插入
    publicPath: false, // 使用公共路径
    tags: ["https://polyfill.alicdn.com/polyfill.min.js"] // 资源路径
})

资源压缩

• 压缩css

  webpack4以下

  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  
  module.exports = {
      // 其他配置...
      plugins: [
          // 添加 OptimizeCSSAssetsPlugin 插件
          new OptimizeCSSAssetsPlugin({
              cssProcessorOptions: {
                  discardComments: { removeAll: true }, // 移除注释
              },
          }),
      ],
  };

  webpack4以上（含）

  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  
  module.exports = {
      // 其他配置...
      optimization: {
          minimizer: [
          new OptimizeCSSAssetsPlugin({
              // 在这里配置压缩选项
              cssProcessorOptions: {
                  discardComments: { removeAll: true }, // 移除注释
              },
          }),
          ],
      },
  };

• 压缩html

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
  // 其他配置...
  plugins: [
      new HtmlWebpackPlugin({
          // 在这里配置压缩选项
          minify: {
              collapseWhitespace: true, // 去除空格
              removeComments: true, // 去除注释
          },
      }),
  ],
  };

  • 压缩图片

  module.exports = {
      // 其他配置...
      module: {
          rules: [
          {
              test: /\.(png|jpe?g|gif|svg)$/i, // 匹配图片文件的正则表达式
              use: [ // 使用的 Loader 数组
              {
                  loader: 'file-loader', // 使用 file-loader 处理图片文件
              },
              {
                  loader: 'image-webpack-loader', // 使用 image-webpack-loader 进行图片优化
                  options: { // 配置 image-webpack-loader 的选项
                  mozjpeg: { // 用于压缩 JPEG 图片的选项
                      progressive: true, // 使用渐进式加载
                      quality: 65, // 压缩质量
                  },
                  // optipng.enabled: false will disable optipng
                  optipng: { // 用于压缩 PNG 图片的选项
                      enabled: false, // 禁用 optipng
                  },
                  pngquant: { // 用于压缩 PNG 图片的选项
                      quality: [0.65, 0.90], // 压缩质量范围
                      speed: 4, // 压缩速度
                  },
                  gifsicle: { // 用于压缩 GIF 图片的选项
                      interlaced: false, // 禁用隔行扫描
                  },
                  // the webp option will enable WEBP
                  webp: { // 用于生成 WEBP 格式图片的选项
                      quality: 75, // WEBP 图片的压缩质量
                  },
                  },
              },
              ],
          },
          ],
      },
  };

二、网络层面（提高速度）

使用CDN

使用 CDN 可以将静态资源（如图片、样式表、JavaScript 文件）分发到全球各地的服务器，从而减少用户访问服务器的距离和网络延迟，加速资源的加载速度。

启用 Gzip 压缩

在服务器端启用 Gzip 压缩，将静态资源进行压缩后传输给客户端，减小文件体积，加快文件的下载速度。

HTTP/2 协议

使用 HTTP/2 协议替代 HTTP/1.x，HTTP/2 支持多路复用、头部压缩等功能，可以显著提高页面加载速度。

使用缓存策略

使用合适的浏览器缓存策略，减少资源重复加载，提高页面加载速度。

优化图片

对图片进行压缩和优化，选择合适的图片格式（如 WebP），减小图片文件大小，提高加载速度。

module.exports = {
    // 创建 ImageminWebpWebpackPlugin 实例，并传入配置对象
    new ImageminWebpWebpackPlugin({
        // 配置要转换为 WebP 格式的图片类型和转换选项
        config: [{
            // 匹配需要转换的图片类型的正则表达式
            test: /\.(jpe?g|png)/,
            // 转换选项，指定转换后图片的质量为 75
            options: {
            quality: 75
            }
        }],
        // 是否覆盖原始图片的扩展名，这里设置为 true，表示覆盖
        overrideExtension: true,
        // 是否显示详细日志，默认为 false，这里设置为 false，表示不显示
        detailedLogs: false,
        // 是否禁止所有日志输出，默认为 false，这里设置为 false，表示不禁止
        silent: false,
        // 是否启用严格模式，默认为 true，这里设置为 true，表示启用
        strict: true
    })
}

多域名

将网站的资源（如图片、样式表、脚本等）分散到多个不同的域名下，并通过不同的域名来提供这些资源，有利于增加并行加载和突破多个域名的连接数限制。

资源合并和优化

将多个小的静态资源文件合并为一个大的文件，并对合并后的文件进行优化，减少请求次数，减小文件体积。

三、代码层面（浏览器资源消耗）

优化 CSS 和 JavaScript 位置

将 CSS 放在页面头部，JavaScript 放在页面底部，以避免阻塞页面渲染。

使用预加载和预渲染

使用 <link rel="preload"> 预加载资源，或者使用服务端渲染（SSR）或预渲染技术，在服务器端生成并缓存完整的 HTML 页面，以提高首屏加载速度。

减少重定向

避免不必要的页面重定向，以减少额外的 HTTP 请求和延迟。

资源懒加载

对于非关键资源，可以使用懒加载技术，在页面滚动到可视区域时再加载资源，减少首次加载时间。加载速度。

优化重绘和回流

避免频繁的 DOM 操作，减少页面的重绘和回流，优化页面的渲染性能。使用 CSS3 动画代替 JavaScript 动画提高动画的性能。

减少第三方插件和库的使用：

减少页面中第三方插件和库的使用，仅保留必要的功能，避免过多的依赖和加载时间，提高页面的加载速度。

按需加载

使用动态导入（Dynamic Import）来实现按需加载

• 路由按需加载

  const router = new Router({
      routes: [
          {
          path: '/',
          name: 'Home',
          component: () => import('./views/Home.vue'), // 按需加载 Home 组件
          },
          // 其他路由...
      ],
      });
  export default router;

• 组件按需加载

  const MyDialog = await import('./MyDialog.vue');
  
  // 创建 Vue 实例
  const dialogInstance = new MyDialog.default();
  
  // 调用组件方法
  dialogInstance.showDialog();

• 第三方库按需加载

import Vue from 'vue';
import { Button, Select } from 'element-ui';

Vue.use(Button)
Vue.use(Select)

优化DOM操作

• 批量更新 DOM

将多个 DOM 操作合并为一次操作，可以减少页面的重绘和回流次数。例如，可以使用文档片段（DocumentFragment）来批量操作 DOM 元素，然后一次性将文档片段添加到页面中，而不是每次都单独操作 DOM 元素。

• 减少 DOM 深度

尽量避免过深的 DOM 结构，减少 DOM 层级可以降低页面重绘和回流的成本。可以通过合并相似的 DOM 元素、减少嵌套等方式来优化 DOM 结构。

• 使用事件委托

使用事件委托（Event Delegation）来减少事件处理器的数量，将事件处理器绑定在父级元素上，然后通过事件冒泡机制来处理子级元素的事件。这样可以减少页面中的事件处理器数量，提高页面的性能。

• 缓存 DOM 查询结果

将重复使用的 DOM 查询结果缓存起来，避免重复查询 DOM 元素，可以提高代码的执行效率。例如，可以将常用的 DOM 元素存储在变量中，并在需要时直接使用变量，而不是每次都重新查询 DOM 元素。

使用防抖和节流

有效地降低浏览器的负载，提升页面性能和用户体验。

图片懒加载

有效地降低页面的加载时间和网络请求次数，提升页面的性能和用户体验。

预解析、预连接、预获取

在页面头部的 <link> 标签中使用 dns-prefetch 关键字指定需要预取的域名，例如：

<link rel="dns-prefetch" href="//example.com">

在页面头部的 <link> 标签中使用 preconnect 关键字指定需要预连接的域名，例如：

<link rel="preconnect" href="//example.com">

在页面头部的 <link> 标签中使用 prefetch 关键字指定需要预取的资源，例如：

<link rel="prefetch" href="example-resource.js">

四、其他层面（其他手段）

Web Workers

使用Web Workers在后台线程中执行耗时的 JavaScript 任务，而不会阻塞主线程的执行。这样可以提高网页的响应速度和性能，增强用户体验。

service Workers

通过将一些静态资源缓存到本地，Service Worker 可以减少对服务器的请求，从而降低了服务器的负载和响应时间。