返回

写给前端er的前端项目webpack调优最佳实践

前端

引言

随着前端项目越来越复杂，构建工具也不断发展，webpack 作为前端项目构建的标准，也经历了多次迭代，从webpack 4到如今的webpack 5，在性能和功能上都有了很大的提升。然而，对于一些老旧的前端项目，仍然使用着较旧的webpack版本，这些项目往往存在启动慢、打包慢等问题，严重影响了开发效率。

本文将以一个真实案例，分享一个前端项目从webpack 4升级到webpack 5的调优过程，并总结出一些最佳实践，希望能为其他前端项目优化提供参考。

项目现状

该项目是一个使用vue-cli脚手架生成的Vue2项目，项目启动和打包非常慢，前端同学已经无力吐槽，亟待升级优化。项目使用webpack 4作为构建工具，依赖项繁多，项目启动需要花费十几秒，打包需要花费几分钟。

调优过程

1. 升级webpack版本

webpack 5相较于webpack 4有了很大的性能提升，因此，第一步就是将webpack版本升级到5。升级过程比较简单，只需要在package.json中将webpack的版本号改为5即可。

{
  "dependencies": {
    "webpack": "^5.0.0"
  }
}

2. 使用缓存

webpack在构建项目时会生成大量的中间文件，这些文件会占用大量的磁盘空间和内存，从而影响构建速度。为了解决这个问题，我们可以使用缓存来存储这些中间文件，这样下次构建时就可以直接从缓存中读取，而无需重新生成。

webpack内置了多种缓存方案，我们可以根据自己的需要选择合适的缓存方案。在该项目中，我们使用的是disk-cache方案，该方案将缓存文件存储在磁盘上。

// webpack.config.js
module.exports = {
  // ...
  cache: {
    type: 'disk'
  }
  // ...
};

3. 使用tree shaking

tree shaking是一种去除未使用代码的技术，它可以有效减小项目打包后的体积，从而提升项目加载速度。webpack 4中默认不开启tree shaking，我们需要手动开启。

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    usedExports: true
  }
  // ...
};

4. 使用代码分割

代码分割是一种将项目拆分成多个小的模块的技术，它可以有效减少项目打包后的体积，从而提升项目加载速度。webpack 4中默认不开启代码分割，我们需要手动开启。

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
  // ...
};

5. 使用CDN

CDN可以将项目静态资源分发到全球各地，从而提升项目加载速度。我们可以将项目中的静态资源，如图片、CSS文件、JS文件等，上传到CDN上，然后在项目中使用CDN地址引用这些资源。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

6. 使用gzip压缩

gzip压缩可以将项目静态资源的体积减小，从而提升项目加载速度。webpack 4中默认不开启gzip压缩，我们需要手动开启。

// webpack.config.js
module.exports = {
  // ...
  devServer: {
    compress: true
  }
  // ...
};

调优结果

经过以上调优，项目的启动时间从十几秒缩短到了几秒，打包时间从几分钟缩短到了几十秒，大大提升了开发效率。

总结

本文分享了一个前端项目从webpack 4升级到webpack 5的调优过程，并总结出了一些最佳实践，希望能为其他前端项目优化提供参考。

在前端项目开发中，性能优化是一个非常重要的环节，它可以大大提升项目的用户体验。我们可以通过使用新的技术栈、优化构建配置、使用缓存、使用代码分割、使用CDN等方式来提升项目性能。