Webpack4实践优化-优化你的Webpack构建过程

从本地安装到构建输出

上节课我们解决了工程的开发调试问题，项目的生产和开发环境也已配置完成，还约定了 Webpack 配置文件规范。但它还很粗糙，这一节我们就来一起打磨这套配置。

在之前的配置中我们使用使用 MiniCssExtractPlugin.loader 来代替 style-loader ，减少了 webpack 构建过程中的重复编译，避免了重复下载和编译。

我们还使用 externals 来解决一些 node_modules 中包含了一些我们不需要的代码，因为它们可以通过 CDN 加载到页面中，以减少打包文件的体积。

然后就是代码分割，我们可以使用 webpack.DllPlugin 和 webpack.DllReferencePlugin 来解决。使用 webpack.DllPlugin 将第三方库打包成一个单独的文件，使用 webpack.DllReferencePlugin 将该文件作为依赖项添加到项目中。

webpack.DllPlugin 和 webpack.DllReferencePlugin 是由 webpack 官方维护的插件，专门用于实现代码分割。这种方式的好处是可以将公共代码打包成一个单独的文件，从而减少重复打包。并且，这个单独的文件可以被多个项目共享，从而减少构建时间。

在默认的配置中，我们启用了 webpack 的 source map 功能，这样可以方便我们调试代码，定位问题。但是，在生产环境中，我们并不需要 source map，因为它会增加构建产物的大小，并且可能会泄露敏感信息。因此，我们在生产环境的配置中禁用了 source map 功能。

我们还启用了 webpack 的 tree shaking 功能，该功能可以自动移除未使用的代码。这可以进一步减小构建产物的体积，提高运行速度。

webpack 的缓存功能可以大大提高构建速度，特别是当我们对项目进行增量修改时。我们可以在 webpack 的配置文件中启用缓存功能，以便在后续的构建中使用缓存。

Webpack 的构建日志可以帮助我们了解构建过程中的详细信息，以便在出现问题时进行排查。我们可以通过配置 webpack 的日志级别来控制日志的输出量。

webpack 的性能分析工具可以帮助我们分析构建过程中的性能瓶颈，以便进行优化。我们可以通过安装 webpack-bundle-analyzer 插件来使用该工具。

通过以上这些优化，我们可以大大提高 webpack 的构建速度，减少资源消耗，优化构建产物，让我们的开发过程更加高效。

总结

Webpack 是一个功能强大且灵活的构建工具，我们可以通过配置来满足不同的需求。在本文中，我们介绍了 webpack 的一些优化技巧，希望能帮助你提高构建速度，减少资源消耗，优化构建产物。