前端性能优化（图片优化）

阅读数:63 评论数:0

分类

html/css/js

正文

一、概述

图片是 Web 页面中最耗费带宽和加载时间的资源之一。

压缩图片	压缩图片可以减少图片的文件大小，从而减少加载时间。
使用矢量图形	使用矢量图形（如 SVG）可以减少文件大小，并且可以在不失真的情况下无限缩放。
使用 WebP 格式图片	WebP 是一种由 Google 开发的图片格式，可以大幅减少文件大小，从而减少加载时间。WebP 格式图片可以在 Chrome、Firefox、Edge 和 Opera 等现代浏览器中使用。
使用适当的图片格式	使用适当的图片格式可以大大减少图片的文件大小。对于需要透明背景的图片，使用 PNG 格式；对于颜色较少的图像，使用 GIF 格式；对于照片和复杂图像，使用 JPEG 格式。
移除图片元数据	：图片通常包含元数据，例如拍摄日期、相机型号等。移除这些元数据可以减少图片的文件大小。
缓存图片	将图片缓存在浏览器中可以减少页面加载时间。你可以使用浏览器缓存机制或者使用CDN来缓存图片
使用 CSS Sprite	使用 CSS Sprites 可以将多个图片合并成一个大图，减少页面中的图片数量，从而减少 HTTP 请求次数，减少页面的加载时间。
图片预加载	通过预加载图片，可以提高用户体验并减少加载时间。你可以使用 preload 或 prefetch 标签来预加载图片。
使用响应式图片	使用响应式图片可以根据设备的分辨率提供不同大小的图片，从而减少加载时间和带宽消耗。你可以使用 srcset 属性和 sizes 属性来实现响应式图片。
使用 Lazyload 延迟加载图片	Lazyload 是一种懒加载技术，它可以将页面中的图片延迟加载，直到用户滚动到页面中的相应位置。这可以减少页面的初始加载时间，并且可以提高用户的体验。可以使用懒加载技术或 Intersection Observer API 来实现延迟加载图片。

二、图片优化实践

1、压缩图片

基于vue3+webpack5，需要安装image-webpack-loader

npm install image-webpack-loader --save-dev

在vue.config.js文件添加以下代码

const { defineConfig } = require("@vue/cli-service");
 
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8123,
    // 调试时启用 gzip 压缩
    compress: true,
    // 调试时允许内网穿透，让外网的人访问到本地调试的 H5 页面
    disableHostCheck: true,
  },
  configureWebpack: {
    plugins: [],
    module: {
      rules: [],
    },
  },
  chainWebpack: (config) => {
    const imagesRule = config.module.rule("images");
    imagesRule
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: {
          progressive: true,
          quality: 65,
        },
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.9],
          speed: 4,
        },
        gifsicle: {
          interlaced: false,
        },
        webp: {
          quality: 75,
        },
      });
  },
});

2、图片的预加载

（1）使用Javascript

你可以使用 JavaScript 创建 Image 对象，并设置其 src 属性来预加载图片。

// 创建一个新的Image对象
var img = new Image();

// 设置图片的源地址（这会开始加载图片）
img.src = 'path/to/your/image.jpg';

// 可选：设置图片加载完成后的回调函数
img.onload = function() {
  console.log('图片预加载完成');
};

（2）使用CSS

在某些情况下，你可以使用 CSS 来预加载图片，通常是将图片设置为元素的背景，并在页面加载时将该元素隐藏。

#preload-image {
  background-image: url('path/to/your/image.jpg');
  display: none; /* 隐藏元素，只是加载图片 */
}

（3）使用HTML

在 HTML 中，你可以直接将图片包含在页面中，但将它们隐藏起来。

<!-- 在HTML中直接预加载图片，但将其隐藏 -->
<img src="path/to/your/image.jpg" alt="Preloaded Image" style="display: none;" />

（4）使用Link标签

HTML5 提供了一种使用 <link> 标签预加载内容的方法，你可以在 <head> 部分添加 preload 属性。

<head>
  <!-- 预加载图片 -->
  <link rel="preload" href="path/to/your/image.jpg" as="image">
</head>

使用 <link rel="preload"> 是预加载资源的最佳实践，因为它允许浏览器优化资源的加载。这种方法告诉浏览器页面很可能需要的资源，浏览器可以选择在页面加载的空闲时间预先加载这些资源。

webpack中的sourcemap

sourcemap和Data URL 1、sourcemap 我们在打包中，将开发环境中源代码经过压缩、去空格、babel编译转化，最终可以得到适用于生产环境的项

开发环境webpack devServer的proxy用法

1、基本用法 module.exports = { //... devServer: { proxy

antd pro 解决浏览器缓存问题

在打包里，加入hash值，即在conf.js文件里加入 export default { hash:t

前端打包工具webpack

一、概述 Webpack 可以帮助我们完成一些任务。比如 js 压缩、css 压缩、编译模板文件等等，从而减少前端的工作量。当然，Webpack 功能很强大，能帮我们完成的工作远远不止这些。如果我们使

webpack productionSourceMap devtool

一、devtool devtool用作调试，它的配置有很多种： 1、eval 每个模块用eval执行，并且存在@sourceUrl，就是说这种配置的devtool，在打包的时候，生成的bundle.j

webpack和vite的比较

一、概述都是现代化打包工具二、对比 1、底层语言从底层原理上来说，Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写，因为go语言的操作是纳秒级别，而js是以毫秒计数，所

秒吧学习