最近，项目本地开发环境的打包速度得到了优化。原来的项目和网上能找到的优化方案基本都加进去了。16年低调的mac pro上的打包时间是25秒以上，但是我发现对细节的一些调整可能会大大减少打包时间，最后优化到7秒以上

dll

原始项目是一组由在线用户和本地用户共享的dll配置。因为像antd这样的ui库需要按需加载，所以不能放入dll。此时，dll配置可以单独编写，所有第三方库都可以添加到dll中。

这时，因为巴别塔-plugin-import插件被添加到。babelrc，优化不会生效，所以需要为开发环境单独配置babel

将选项的babelrc设置为false，然后重写一个babel配置，永远不要添加“import”插件

一个新问题，因为没有导入插件，所有的antd组件样式都丢失了。这时，我在index-template.html加了一行评论！- local-style -，本地打包时，替换为cdn上对应版本antd的css文件

躲藏

缓存加载器擅长花式！虽然你可以在webpack的配置中找到N个缓存设置，但我发现缓存加载器可以替代其他选项。它将创建一个文件夹。项目中的缓存加载程序，用于存储缓存文件。因为是直接写入硬盘，第一次打包需要多几秒。

Babel-loader多线程

从上图可以看出，我把babel-loader升级到了8，新的预置和插件都改了名字。预设-env用于替换之前的201X。您可以通过目标指定目标代码(编译代码)的版本。因为是本地开发的，可以指定更高版本的chrome，所以很多新语法不需要转换，可以节省一点时间(打包速度不到10秒就降低一秒，提升10%！不过这个程序要慎用，因为会造成线上本地环境不一致，很难保证不会出现神奇的bug

拔掉HappyPack以提高性能

在测试的过程中，我发现了一个神奇的事情，那就是HappyPack会减少打包时间。经过反复测试，似乎babel-loader8自带多线程优化，所以HappyPack没有用(反而因为线程通信浪费了资源)。Babel-loader8的cpu使用率和打包时间和babel-loader6 plus HappyPack差不多，但是在google上搜索的时候没有看到有人提到，官网也没有看到一个备注(不管是什么，都可以加速！)

跟进计划

这个项目是两个人迭代一年的代码量。按照上面的配置，大部分项目都要优化到10秒左右的速度(根据项目的大小，20秒以内应该是正常的)，一些小的优化细节对性能影响不大，所以就忽略了。目前webpack还是3版，因为4的一些改动担心影响太大，暂时没有升级。升级后应该会有一些小幅度的提速。这7秒不是最终速度。我估计5秒应该没问题，然后我想以后再优化。你需要打开你的大脑。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。