前端项目的性能优化几个方面

最新推荐文章于 2024-09-13 23:22:55 发布

坏坏的书生

最新推荐文章于 2024-09-13 23:22:55 发布

阅读量7.9k

点赞数 7

分类专栏：概念文章标签：前端项目的性能优化几个方面

本文链接：https://blog.csdn.net/weixin_39458031/article/details/88091462

版权

概念专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. 利用打包工具打包压缩前端代码
拿目前最流行的webpack为例：
webpack 可以将前端代码压缩差不多你未压缩之前的一半体积或更多，这样项目体积缩小，加快浏览器的解析速度
在配置webpack过程中，也需要合理配置
1. loader 解析器直解析我们需要解析的代码如babel-loader
最常见的优化方式是，用 include 或 exclude 来帮我们避免不必要的转译如(node_modules|bower_components)依赖

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

配置loader时，使用缓存设置，将loader 转译结果缓存至文件系统，则至少可以将 babel-loader 的工作效率提升两倍。要做到这点，我们只需要为 loader 增加相应的参数设定：如下：

loader: 'babel-loader?cacheDirectory=true'

可以借助代码压缩结果图形化展示管理工具看出打包后的项目中，哪些代码体积比较大，那些代码所占体积较小，它会以矩形树图的形式将包内各个模块的大小和依赖关系呈现出来（只要进行如下配置即可）

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

删除项目中的冗余代码及废弃代码
webpack 配置使用 Tree-Shaking 插件
基于 import/export 语法，Tree-Shaking 可以在编译的过程中获悉哪些模块并没有真正被使用，这些没用的代码，在最后打包的时候会被去除。如下：

import { page1, page2 } from './pages'
    
// show是事先定义好的函数，大家理解它的功能是展示页面即可
show(page1)

在 pages文件中如下：

export const page1 = xxx

export const page2 = xxx

但因为 page2 事实上并没有被用到（这个没有被用到的情况在静态分析的过程中是可以被感知出来的），所以打包的结果里会把这部分：

export const page1 = xxx

直接就会把 export const page2 = xxx 删掉。这就是Tree-Shaking 的作用

5. 对代码进行压缩使用 UglifyJsPlugin插件（webpack 4.0 默认已经内部配置，不用你自己配置了）
删除代码中的console 语句注释的语句以及空格等，使代码更加紧凑。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
 plugins: [
   new UglifyJsPlugin({
     // 允许并发
     parallel: true,
     // 开启缓存
     cache: true,
     compress: {
       // 删除所有的console语句    
       drop_console: true
     },
     output: {
       // 不保留注释
       comment: false,
       // 使输出的代码尽可能紧凑
       beautify: false
     }
   })
 ]
}

6.按需加载
以上都是对webpack 的配置，下面说一下按需加载，比如使用vue 做一个项目，总共有十几个页面，用vue-router 配置这十几个页面的路由，打包好项目后，你用浏览器打开项目，发现页面打开特别慢，什么原因呢，你一下子把十几个页面全部加载了，肯定慢，假如你进入哪一个页面，加载那一个页面，这样是不是会好很多呢，
如下是vue 官网提供的路由懒加载方案：

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97

7. Gzip 压缩原理（即HTTP 压缩）
具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：

accept-encoding:gzip

HTTP 压缩是一种内置到网页服务器和网页客户端中以改进传输速度和带宽利用率的方式
Gzip 压缩是服务器的活儿，一般来说，
服务器接收到http中压缩请求，它会启动自己的 CPU 去为我们完成这个任务。而压缩文件这个过程本身是需要耗费时间的，大家可以理解为我们以服务器压缩的时间开销和 CPU 开销（以及浏览器解析压缩文件的开销）为代价，省下了一些传输过程中的时间开销。
简单的说其实就是：
服务器压缩 Gzip，服务端要花时间；浏览器解压 Gzip，要花时间。中间节省出来的传输时间比较可观，对于大型项目来说一般可以节省一半http 响应时间。
如果你手上的项目是 1k、2k 的小文件，那确实有点高射炮打蚊子的意思。

8. 图片压缩优化
以下是几种图片的特点：

jpg ：有损压缩、体积小、加载快、不支持透明图片
PNG-8 与 PNG-24 ：无损压缩、质量高、体积大、支持透明
SVG：文本文件、体积小、不失真、兼容性好
SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。