在项目的性能优化中，一般包含以下几个方面：

  • 构建性能
  • 传输性能
  • 运行性能

构建性能

在webpack的项目中，每次修改代码后，webpack都会分析修改模块的相关依赖，并重新构建项目，最终呈现在页面 中。

在最近比较火的Vite脚手架中，则没有像webpack那样，分析依赖模块的关系。而是直接在本地开启一个服务器，利用script标签中的type=”module”属性，在网页需要时，将相关模块从本地服务器发送给浏览器。

而所谓优化构建性能，就是优化开发人员在开发阶段时webpack重新构建项目的时间，进而缩短开发人员这部分的开发时间。

优化构建性能，并不能让项目在生产环境中的性能有多大的提升，它只优化开发阶段的构建性能。

优化构建性能的几个方面

  • 减少模块解析
  • 优化loader性能
  • 热替换HMR

传输性能

传输性能是针对于线上代码优化的方面。

从用户在浏览器地址栏输入URL地址并敲下回车后，客户端到服务端发生了一系列操作，最终将页面呈现给用户。在这段时间中，客户端对服务器资源请求的耗时很大程度影响了用户能否停留在网站中。

浏览器请求服务器采用的是http协议，这是一种无状态的协议。每一次http请求都会经历三次握手和四次挥手，如果一个网站有过多的http请求，这必定会造成网站性能的降低；但如果单次请求的内容过大时，对于网络不好的用户，可能会有相当不好的体验。

优化传输性能就是在请求数量和请求大小之间的一种平衡。

优化传输性能需要考虑到：

  • 总传输量。即所有js文件从服务器传输到浏览器中所需要消耗的时间
  • 文件数量。过多的js文件就会造成过多的http请求，请求越多，响应速度也就越慢
  • 浏览器缓存。利用浏览器缓存，可以将一些变动不大的js文件缓存到浏览器中，也避免了过多且没必要的http请求。

运行性能

运行性能主要依靠的是开发人员的代码质量，即高性能js代码。

如同一个功能，在使用算法和不使用算法的情况下，其运行的效率也是不一样的。

小结

项目的性能优化主要有三个方面：构建性能，传输性能和运行性能。
其中构建性能和传输性能都可以通过webpack配置来进行优化。
而运行性能，则需要开发人员的js代码质量来体现。