5月的第二周我们的前端专题又来了，上次的前端专题介绍的是Flutter的应用与实战。这次给大家带来的是webpack相关的专题。很多小伙伴上了我们的前端训练营，本周的专题就是玩转webpack性能调优。webpack的性能调优相对简单，主要分为两种及如何构建速度和如何优化打包后的速度。废话不多说，我们开始学习吧！

 

webpack构建速度和体积优化策略

本篇主要是作者自己日常性能优化以及对webpack优化进行总结，内容比较基础，专题开始的开胃小菜！

 

使用 webpack 进行 Web 性能优化（一）

使用 webpack 进行 Web 性能优化（二）

使用 webpack 进行 Web 性能优化（三）

现代 Web 应用程序通常使用打包工具来创建文件（脚本、样式表等）“包”，这些文件经过优化、缩小，用户可以在更短的时间内下载。 在使用 webpack 进行 Web 性能优化此文中，我们将介绍如何使用 webpack 有效地优化站点资源。

 

用Webpack这15个点，速度提升70%，体积减小80%！

使用webpack打包躲不开的就是webpack优化这个话题，无论是面试还是实际开发，优化都是非常重要的事情。本篇列出了15个webpack优化的方法供大家学习！

 

从实际项目入手，完成web性能监控及优化

这篇文章总结一下作者过往项目的web性能优化，主要是就项目中如何发现性能问题，优化如何解决。本篇共有13个优化案例，囊括了web的所有优化方案，适合初中级前端工程师阅读。

 

我的第一次webpack优化，首屏渲染从9s到1s

谈到webpack优化大部分人可能都看腻了，无非就那几招嘛，我之前也是看过许多类似的文章，但都没有自己真正上手过，下面是我用公司的项目真实操练下来的，首屏加载速度提升很大（刷刷的），希望能帮到你。

 

微医对于webpack5持久化缓存优化的实践

1、公司的云his静态项目代码量巨大，依赖的npm包大概有100个，打包一次大概要14分钟；

2、自研的hammer工具的本地打包虽然能提升部署时间，但是依赖开发的手动操作；

3、用来存放本地构建产物的服务器容量满了，所以为了正常使用本地打包功能，还得定期去清理服务器上的老文件，不够方便。

所以对于webpack的优化势在必行，本文将从webpack5出发详解webpack5的持久化缓存实践。

 

本周的webpack优化专题到这里就结束啦！希望大家能学以致用！