前端性能优化篇

Clavin.

已于 2023-06-10 22:53:32 修改

阅读量595

点赞数

文章标签：前端 1024程序员节

于 2022-05-05 19:10:40 首次发布

本文链接：https://blog.csdn.net/wyh666csdn/article/details/124595213

版权

防抖和节流

对搜索框和提交按钮防抖，用户频繁点击只会最后发送请求
对监听页面滚动进行节流

路由懒加载和图片懒加载

路由懒加载采用箭头函数和import引入组件
图片懒加载采用监听滚动距离，当滚动距离加可视化高度大于图片的offsetTop时再设置图片的src，可以用loading组件占位

减少回流与重绘

回流是dom元素尺寸或结构改变，重绘是元素的样式改变。
回流一定重绘。
即不要频繁操作dom

图片优化

小图片使用base64
使用雪碧图(多图合一)

webpack优化

利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。通过externals加载外部CDN资源
1.默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题，为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包都不会被打包。
在这里插入图片描述

Tree Shaking: 将代码中永远不会⾛到的⽚段删除
掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
代码压缩:只需要将 mode 设置为 production 就可以默认开启，如果使用 Webpack 4 的话，开启生产环境就会自动启动这个优化功能。
代码分包：
对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js；这些chunk.js会在需要时从服务器加载下来，并且运行代码，显示对应的内容；
通过import函数导入文件打包出来的代码是分包的
如果我们的项目过大了，对于某些组件我们希望通过异步的方式来进行加载（目的是可以对其进行分包处理），那么Vue中给我们提供了一个函数：defineAsyncComponent。
异步导入组件

 import { defineAsyncComponent } from 'vue';
 const AsyncCategory = defineAsyncComponent(() => import("./AsyncCategory.vue"))

到时候这个组件会被打包到单独的包里，一般是把路由写成异步组件形式

loader优化

对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，这是可以优化的。
首先我们优化 Loader 的文件搜索范围

module.exports = {
  module: {
    rules: [
      {
         js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
         只在 src 文件夹下查找
        include: [resolve('src')],
         不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}