如何通过webpack实现快速打包构建及代码调试优化？

本文共计3769个文字，预计阅读时间需要16分钟。

前言+本文主要总结webpack在性能方面常见的优化方案。正文+本文将分别从开发和生产环境两个方面总结webpack在打包构建速度和代码调试功能方面的优化方案。

1. 开发环境性能优化（1）优化打包构建速度- 使用更快的loader，例如使用`thread-loader`替代`babel-loader`的`cache-loader`；- 开启`splitChunks`来分离第三方库，减少单次构建时间；- 使用`happypack`来并行处理loader，提高构建效率。

（2）代码调试功能优化- 使用`source-map`生成映射文件，方便调试；- 配置`devtool`为`eval-source-map`或`cheap-module-eval-source-map`，提高调试速度。

2. 生产环境性能优化（1）优化打包构建速度- 使用更快的打包工具，例如`webpack@4.x`相比`webpack@3.x`有显著的性能提升；- 使用`dll-plugin`来分离第三方库，加快首次构建速度；- 使用`hard-source-webpack-plugin`缓存构建结果，提高后续构建速度。

（2）代码调试功能优化- 在生产环境中，使用`source-map`生成映射文件，方便调试；- 配置`devtool`为`hidden-source-map`或`nosources-source-map`，减小打包体积。

前言

　　本文来总结写webpack 在性能方面常见的优化方案。

正文

　　本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案，如下：

　　1、开发环境性能优化 　　（1）优化打包构建速度 　　a、HMR: hot module replacement ，热模块替换，作用：当一个模块发生变化的时候，只会重新打包发生变化的模块，并不会打包所有模块，极大的提升了代码构建速度。