webpack4 - 提高Vue2+Webpack4项目编译效率？

Question

公司里的vue2+webpack4项目，启动编译时间达到4分钟左右，启动完以后，改一行代码，重新编译的时间，也有达到10秒左右，我想优化一下项目，使用speed-measure-webpack-plugin这个插件，测速，启动时间暂时不管，我改了东西，重新编译，总感觉是不是有东西重复了，麻烦各位大神帮忙看看

有大神如果想看看是什么奇葩项目，启动时间这么久，也可以帮我一起看看，头大

Answer 1

你好，我很愿意帮助你提高 Vue2 + Webpack4 项目的编译效率。

首先，我们可以从以下几个方面来考虑优化：

1. 使用更快的硬件：如果你的编译时间太长，考虑使用更快的硬盘，或者使用 SSD。另外，如果你有多核 CPU，可以尝试使用更快的 CPU。
2. 优化 Webpack 配置：检查你的 Webpack 配置，看是否有可以优化的地方。例如，你可以使用 exclude 来排除一些不需要处理的文件和文件夹。另外，你也可以考虑使用 splitChunks 来将代码拆分成多个块，这样可以减少每次编译时需要处理的代码量。
3. 使用更快的 JavaScript 编译器：尝试使用更快的 JavaScript 编译器，例如 Babel。
4. 使用 DllPlugin：DllPlugin 可以将特定的依赖项提取到单独的 Dll 中，然后在应用程序中重复使用这些 Dll。这可以显著减少编译时间。
5. 使用缓存：考虑使用缓存来存储编译结果。例如，你可以使用 hard-source-webpack-plugin 或 cache-loader 来缓存某些模块的编译结果。
6. 优化图片和字体：如果你的项目中包含大量的图片和字体文件，可以尝试优化这些文件。例如，你可以压缩图片，或者使用更小的字体格式。
7. 使用多进程：尝试使用多进程来并行处理任务。例如，你可以使用 thread-loader 或 happypack 来将任务分配给多个进程处理。
8. 优化插件：检查你使用的所有插件，看是否有可以优化的地方。有些插件可能会减慢编译速度。
9. 优化代码：检查你的代码，看是否有可以优化的地方。例如，你可以避免使用过多的嵌套语句或循环，或者使用更高效的算法和数据结构。
10. 使用性能分析工具：使用性能分析工具来找出编译过程中最耗时的部分。例如，你可以使用 webpack-bundle-analyzer 来分析你的包，并找出最耗时的部分。

希望这些建议能帮助你提高 Vue2 + Webpack4 项目的编译效率。如果你需要进一步的帮助，请随时提问。