Webpack 是目前前端开发最重要的构建工具。无论是自己的日常开发，还是准备面试，都应该掌握一些关于 Webpack 的优化技巧。 在这篇文章中，我将从三个方面分享一些我常用的技巧： 提高优化速度 压缩打包文件的大小 改善用户体验。
01、线程加载器
多线程可以提高程序的效率，我们也可以在 Webpack 中使用。而thread-loader是一个可以在Webpack中启用多线程的加载器。
安装：
npm i thread-loader -D
配置：
{ test: /\.js$/, use: [ 'thread-loader', 'babel-loader' ], }
02、缓存加载器
在我们的项目开发过程中，Webpack 需要多次构建项目。为了加快后续构建，我们可以使用缓存，与缓存相关的加载器是缓存加载器。
安装：
npm i cache-loader -D
配置：
{ test: /\.js$/, use: [ 'cache-loader', 'thread-loader', 'babel-loader' ], }
03、Hot update
当我们在项目中修改一个文件时，Webpack 默认会重新构建整个项目，但这并不是必须的。我们只需要重新编译这个文件，效率更高，这种策略称为Hot update。
Webpack 内置了Hot update插件，我们只需要在配置中开启Hot update即可。
配置：
const webpack = require('webpack');
然后：
{ plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true } } 04、exclude & include
在我们的项目中，一些文件和文件夹永远不需要参与构建。所以我们可以在配置文件中指定这些文件，防止Webpack取回它们，从而提高编译效率。
当然，我们也可以指定一些文件需要编译。
exclude : 不需要编译的文件
include : 需要编译的文件
使用过滤方法的代码几乎相同，但使用方法会改变访问模板内值的方式。但是，如果我们希望能够将变量传递给过滤过程，那么就应该选择方法这条路。
配置：
{ test: /\.js$/, include: path.resolve(__dirname, '../src'), exclude: /node_modules/, use: [ 'babel-loader' ] }
减小打包文件的大小 05、缩小 CSS 代码
css-minimizer-webpack-plugin 可以压缩和去重 CSS 代码。
安装：
npm i css-minimizer-webpack-plugin -D
配置：
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
和
optimization: { minimizer: [ new CssMinimizerPlugin(), ], }