如何构建高性能前端项目

全能废柴
291 阅读3分钟

作为一名前端开发工程师，我们要从全方位考虑我们项目的性能，刚好最近也优化了下公司的老项目，这里做个记录分享吧～请各位看官老爷们多多指教。

image.png

减小包体积

生产环境上因为带宽是贵重的资源，尤其对于小商家来说，如果对于请求不进行压缩，就是白白浪费带宽，不仅浪费钱，还可能影响别的正常业务。所以上生产环境前要观察是否开启了gzip压缩

打开控制台

image.png

  • 这里字段Content-Encoding显示gzip就表示已经使用压缩。 目前主流部署方式是nginx+spring服务，通过nginx提供反向代理以及waf功能，通过spring来实现业务代码。nginx跟spring都提供gzip的压缩方法

nginx打开gzip

  compression:
    enabled: true
    mime-types: text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json
    min-response-size: 1024

spring 配置打开 gzip

  compression:
    enabled: true
    mime-types: text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json
    min-response-size: 1024

当然这些压缩并不是我们前端能做的，可以找公司运维或者后端去配置。不过前端也可以进行gizp压缩，具体操作参考webpack开启gizp

Tree Shaking treeshaking这个概念起源于rollup,本质是消除无用的js代码，webpack5开启treeshaking

module.exports = {
  ...
  optimization: {
    usedExports: true,
  },
};

注意要在package.json里设置有副作用的css,less文件,不然会被摒弃掉

"sideEffects": [
    "*.css",
    "*.scss",
    "*.less"
  ],

当然你也可以加上任意你想的禁止treeshaking的文件

压缩代码 我们在开发环境的代码文件都是带注释和空格的，这些无疑增加了包的体积，我们可以用webpack5社区提供的插件terser-webpack-plugin，css-minimizer-webpack-plugin来对js和样式文件进行压缩

...
minimizer: [
      new TerserWebpackPlugin(),
      new CssMiniMizerPlugin()
    ],

提高请求速度-开启http2协议

特性： 多路复用 头部压缩 二进制分帧 服务器推送

打开控制台

image.png Protocol下的h2就代表该请求用的http2协议，不过要注意# http2必须强制https,这个可以让运维那边将http协议转换成https。

减小图片资源体积和数量

图片资源算是前端项目用的最多的静态资源了，我们可以先用tinify.cn/ 进行压缩，如果还是超过200kb,可以考虑使用将其转换成webp格式，webP文件格式和JPEG类似，也是通过牺牲图片质量来降低图片文件大小，但能在相同质量的情况下比JPEG文件尺寸小巧许多。下面是webp的浏览器兼容

image.png 可以通过代码去处理不兼容的浏览器，这里不在详细展开，可以参考github.com/rico-c/RICO… 虽然比较麻烦，但是收益是大于成本的。 另外对于很小的图片资源4kb<,我们可以将其转换成base64插入到css中，来减少网络请求

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4kb 大于4kb 视为resource 模块类型
          }
        },
        generator: {
          filename: 'assets/[name].[hash:5].[ext]'
        }
      }
avatar
文章
阅读
粉丝