前端工程化实战：React 模块化开发性能优化和组件化实践

Posted 2023-04-11 githxk

前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。

前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。

1. 模块化开发

在 React 中实现模块化开发的方式有两种：CommonJS 模块和 ES6 模块。

CommonJS 模块化开发：

点击查看代码

// 引入依赖
const React = require(\'react\')
const ReactDOM = require(\'react-dom\')

// 定义组件
const App = React.createClass(
  render: function() 
    return <div>Hello World!</div>
  
)

// 渲染组件
ReactDOM.render(
  <App />,
  document.getElementById(\'app\')
)

ES6 模块化开发：

点击查看代码

// 引入依赖
import React from \'react\'
import ReactDOM from \'react-dom\'

// 定义组件
class App extends React.Component 
  render() 
    return <div>Hello World!</div>
  


// 渲染组件
ReactDOM.render(
  <App />,
  document.getElementById(\'app\')
)

2. 性能优化

在 React 中，可以通过 shouldComponentUpdate 方法来控制组件的更新。默认情况下，每次 setState 或者 props 改变都会导致组件重新渲染。但是有些情况下，组件并不需要重新渲染，这时可以通过 shouldComponentUpdate 方法来实现性能优化。

shouldComponentUpdate 方法接收两个参数：nextProps 和 nextState，表示组件将要更新的 props 和 state。shouldComponentUpdate 方法返回一个布尔值，如果为 true，表示组件需要重新渲染，如果为 false，表示组件不需要重新渲染。

举个例子，实现一个只有在 props.count 变化时才重新渲染的组件：

点击查看代码

class Count extends React.Component 
  shouldComponentUpdate(nextProps, nextState) 
    return nextProps.count !== this.props.count
  

  render() 
    return <div>this.props.count</div>
  

3. 组件化实践

组件化是 React 的核心思想之一，能够将页面拆分成多个独立的组件，每个组件只需要关注自己的逻辑和样式。在实践中，可以将组件拆分成 UI 组件和容器组件。

UI 组件：只关注展示和交互，不关心数据来源和数据变化。

点击查看代码

class Button extends React.Component 
  render() 
    const  onClick, text  = this.props
    return <button onClick=onClick>text</button>
  

容器组件：负责管理数据和业务逻辑，渲染 UI 组件。

点击查看代码

class App extends React.Component 
  constructor(props) 
    super(props)
    this.state =  count: 0 
  

  increment() 
    this.setState( count: this.state.count + 1 )
  

  render() 
    return (
      <div>
        <Button onClick=() => this.increment() text=`Count: $this.state.count` />
      </div>
    )
  

以上就是前端工程化实战中 React 的模块化开发、性能优化和组件化实践的简单介绍和示例代码。

这些Web前端开发性能优化,你知道吗?

有对象的人

都关注了我们

现在Web前端工程师很吃香，同时需要Web前端工程师会的技能要求也越来越高，不再是仅仅编写网页静态代码那么简单，还需要进行网站性能优化等工作，下面小编就给大家介绍一下Web前端开发性能优化有那些。

根据网站的分层架构，可以大致的分为web前端性能优化，应用服务器性能优化，存储服务器性能优化三大类。

一般来说，web前端就是应用服务器处理之前的部分，包括浏览器渲染、加载，前端视图模型，图片视频资源，CDN服务等，主要优化方法就是优化浏览器访问渲染过程，使用反向代理，使用CDN服务等。

Web前端开发性能优化有那些？

1.浏览器访问渲染优化,减少http请求数

http协议是无状态的应用层协议，每次http请求都会建立新的通信链路，并且在服务端，每个http连接都会开启一个单独的线程去处理请求，这都会产生额外的开销。

主要手段就是去合并压缩css，JavaScript，图片文件，把需要的css，JavaScript，图片资源进行合并减少建立的连接请求数。

同时使用http的keep-alive来进行连接的复用，以此来减少建立的http连接数，提高访问性能。

2.启用压缩

在服务端进行文件的压缩，减少通信传输过程中的数据量。

对于文本文件，压缩率能够达到80%以上，因此在服务端启用gzip压缩是一个很好的选择，但启用压缩的同时也会给服务器带来额外的开销，所以要具体情况具体分析。

3.css，JavaScript代码优化,css代码优化：

尽量使用外部样式，并且放在页面顶部加载，一方面能够及时渲染，另一方面能够避免因某些样式导致阻塞渲染。

压缩合并css文件，尽量精简文件，减少通信传输数据量和请求连接数

4.JavaScript代码优化：

因为JavaScript代码边加载边解析，解析的过程会阻塞浏览器渲染，因此把JavaScript代码放在页面底部加载同样的压缩合并JavaScript文件，尽量精简文件，减少通信传输数据量和请求连接数

5.写高性能的JavaScript代码,使用浏览器缓存

一般来说，对于网站里面不经常变化的静态资源，更新频率比较低，因此可以把这些资源缓存在浏览器中，能够很好的改善性能。

通过设置http头里的Cache-Control和Expires属性来设定浏览器缓存时间。

另外还有Etags和opcode的缓存，根据具体情况进行选择吧。

6.CDN加速

CDN的本质也属于缓存，内容分发网络，把数据缓存在里用户近的地方，使用户尽快的获取数据。

因为CDN都是部署在网络运营商的机房，这些运营商又同时为用户提供网络服务，因此用户请求的路由会优先到达CDN服务器，如果存在请求的资源的话，就直接返回，最短路径返回响应，加速用户访问速度，同时还能够为中心机房减轻压力。

CDN一般用来缓存静态资源，css，Script脚本，静态页面，图片等，这些内容修改频率很低但是访问请求频率很高，因此放在CDN上能够很好的改善访问速度。

7.反向代理

传统的代理服务器是当你请求不到所请求的资源时，由代理服务器帮你请求，你知道你请求的最终的服务器是谁，典型的例子就是VPN，通过代理服务器来请求到墙外的世界。

反向代理web服务器接收http请求，然后进行请求转发，获取到内容后返回给你，你只知道是由反向代理服务器给你的数据，而不知道数据源最终是从哪个服务器来的。

反向代理服务器具有保护作用，来自互联网的请求都需要经过反向代理服务器，相当于在web服务器之间建立起了一道屏障。

除了安全以外，可以在反向代理服务器上进行一些静态资源的缓存，以此来提高访问速度，减轻应用服务器的负载压力。

当然，有些动态资源也可以缓存在代理服务器上面，比如说热门的词条，帖子，博客等，这些资源的请求量可能非常非常的大，如果每次都走一遍流程的话会造成很大的压力，同时，当这些动态内容发生改变时，会通知反向代理服务器缓存失效，代理服务器会重新缓存动态资源。

除此之外，反向代理服务器还可以用来做负载均衡，通过负载均衡来构建服务器集群，以此来提高系统的总体处理能力，进而应用提高服务器处理高并发的能力。

PS：使用ajax也是提高用户体验很好的方法，不过ajax对于SEO并不友好，所以需要用到SEO的地方还是要考虑好是否要用ajax。

好了，关于web前端优化就写到这里,记得给小编点一波关注,加个鸡腿,更多干货等你来拿!

扫描下方二维码↓↓↓添加萌萌妹子微信,免费获取学习资料,大量的技能干货等你来拿~

想要获取更多行业资讯,技能干货,记得扫描下方二维码订阅我们!