vue项目的性能优化，跳槽字节跳动

• 移动端可以直接在img标签添加loading=“lazy”属性，浏览器自动处理图片的懒加载

• vue中可以安装插件vue-lazyload，通过v-lazy写到对应的元素实现

  • 插件是在main.js中引入的，不会被webpack编译，直接写相对地址是获取不到图片正确地址的
  • 设置了翻页功能，且每页都是请求的数据进行渲染的，发现其他数据都会变，但是图片不变，解决办法就在后面加个key就行：

  <img v-lazy="img.src" :key="img.src" >
  
  

IntersectionObserver（浏览器提供的API）实现图片懒加载原理：观察图片与视窗的交叉情况，从而判断是否出现在视窗中。实现图片懒加载步骤大概：

• 创建一个观察器对象，指定要观察的图片 以及 触发交叉状态变化时的回调函数
• 在函数中判断是否进入视窗内部
• 进入的话就触发回调函数，执行图片加载操作，把真实地址赋给src，再停止监听

<!-- HTML -->
<img class="lazy-load" data-src="lazy-image.jpg" alt="Lazy-loaded image">
<script>
  // JavaScript
  // 创建 IntersectionObserver 对象
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) { // 判断目标元素是否进入视窗内
        const lazyImage = entry.target;
        lazyImage.src = lazyImage.dataset.src; // 将真实图片地址赋给src属性
        observer.unobserve(lazyImage); // 停止观察该目标元素
      }
    });
  });
  // 获取所有带有 lazy-load 类的图片元素
  const lazyImages = document.querySelectorAll('.lazy-load');
  // 遍历所有图片元素，开始观察
  lazyImages.forEach(image => {
    observer.observe(image);
  });
</script>

8.2 图片压缩

可以在webpack.base.conf.js中url-loader设置limit大小来处理图片，小于limit的图片转换成base64格式

将图片转成base64格式的原因：

• 减少HTTP请求：转成base64后，可以直接包含在HTML、CSS或JS文件中，而不用单独的HTTP请求，也就减少了服务器的负载
• 增加缓存利用率：图片已经在文件中，可以利用浏览器的缓存机制，避免重复加载相同的图片资源

对于一些较大的图片可以用image-webpack-loader压缩，具体配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,  // 图片小于8KB时转换为base64
              name: '[name].[ext]',
              outputPath: 'images/'  // 输出到指定目录
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

8.3 雪碧图

针对多个小图标可以利用雪碧图技术，将其合并成一张大图，减少HTTP请求次数

• 把小图标准备好，放在同一个文件夹下
• 用webpack插件webpack-spritesmith将其合并成一张雪碧图
• 可以设置每个图标的样式
• 通过background-position来显示需要的图标

9、路由懒加载

路由被访问才加载对应的组件，提高首屏显示速度

const Foo = () => import('./Foo.vue')

10、第三方插件按需引入

用babel-plugin-component只引入需要的组件，减小项目体积。安装包导入依赖即可，在main.js按需引入组件

项目打包层面

1、提取公共代码

安装分析工具webpack-bundle-analyzer，会生成可视化的文件链路图，根据需求做调整。

用CommonsChunkPlugin（webpack内置插件）去提取多个chunk的公共部分。

2、减少ES6转换成ES5的冗余代码

babel在每个输出文件中内嵌依赖的辅助函数代码，不让这些代码重复出现，可以用babel-plugin-transform-runtime插件，减小babel编译出来的代码大小。

• 安装包
• 修改.babelrc配置文件

"plugins": [
    "transform-runtime"
]

3、压缩和合并JS、CSS文件

使用OptimizeCssnanoPlugin插件来压缩和去重css样式文件，开启optimization.minimize来压缩js代码。

4、tree shaking

tree shaking只能处理ES6模块，消除未使用过的代码，减少文件大小。

使用生产模式，在config.js设置mode: ‘production’来启用生产模式，用usedExports: true来启用tree shaking

项目部署层面

1、开启gzip压缩

前后端都可以压缩，不管在nginx还是webpack压缩，在nginx都要开启gzip压缩，要不然浏览器加载的还是未压缩的资源。

识别gzip压缩是否开启，只需要看响应头部有没有Content-Encoding：gzip这个属性，有就表明开启了。

（1）在vue-cli初始化项目中，默认有这个配置：

• 先安装插件，再在config/index.js文件开启即可

build: {
    // 其他代码
    …………
    productionGzip: true, // false不开启gizp，true开启
    // 其他代码
}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Linux运维工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Linux运维全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Linux运维知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加VX：vip1024b （备注Linux运维获取）

的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Linux运维知识点，真正体系化！**

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加VX：vip1024b （备注Linux运维获取）
[外链图片转存中…(img-d1Cpwr1L-1712725109708)]