webpack优化

编译优化

1、使用缓存：缓存可以显著提高编译速度。例如，babel-loader 的 cacheDirectory 选项可以将转译的结果缓存到文件系统中，此外，cache-loader 可以将其他 loader 的处理结果缓存到磁盘。

2、DLL 动态链接库：DLL 文件为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据。原因在于包含大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。

3、性能分析：使用 speed-measure-webpack-plugin 进行速度分析，可以看到每一个 Loader 以及 Plugin 的耗时。

4、合理配置：例如，使用 include 或者 exclude 配置，来避免重复打包。

5、提升基础环境版本：更新到最新的 Webpack 版本，可以利用最新的性能优化。

6、启用多进程打包：可以进一步提高打包速度。

7、开发中使用热更新替换自动刷新：这样可以避免每次修改代码后都需要完全重新构建。

8、使用 DllPlugin 插件：优化提高打包时间。

打包优化

1、提升基础环境版本：更新到最新的 Webpack 版本，可以利用最新的性能优化。

2、 使用 include 或者 exclude 配置：避免重复打包。

3、 合理的利用缓存来减少打包时间：例如，babel-loader 的 cacheDirectory 选项可以将转译的结果缓存到文件系统中

4、 合理的使用 plugin：减少打包时间和体积。

5、 合理配置 relosve：防止减慢打包时间。

6、 启用多进程打包：可以进一步提高打包速度。

7、开发中使用热更新替换自动刷新：这样可以避免每次修改代码后都需要完全重新构建。

8、 使用 DllPlugin 插件：优化提高打包时间。

9、 使用 speed-measure-webpack-plugin 插件：它分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让我们对打包时间较长的部分进行针对性优化。