13个你应该知道的 Webpack 优化技巧

在这篇文章中，我将从三个方面分享一些我常用的技巧：

提高优化速度压缩打包文件的大小改善用户体验。

提高速度

1、线程加载器

多线程可以提高程序的效率，我们也可以在 Webpack 中使用。而thread-loader是一个可以在Webpack中启用多线程的加载器。

安装：

npm i thread-loader -D

配置：

{

test: /\.js$/,

use: [

thread-loader,

babel-loader

],

}

2、缓存加载器

在我们的项目开发过程中，Webpack 需要多次构建项目。为了加快后续构建，我们可以使用缓存，与缓存相关的加载器是缓存加载器。

安装：

npm i cache-loader -D

配置：

{

test: /\.js$/,

use: [

cache-loader,

thread-loader,

babel-loader

],

}

3、Hot update

当我们在项目中修改一个文件时，Webpack 默认会重新构建整个项目，但这并不是必须的。我们只需要重新编译这个文件，效率更高，这种策略称为Hot update。

Webpack 内置了Hot update插件，我们只需要在配置中开启Hot update即可。

配置：

// import webpack

const webpack = require(webpack);

然后：

{

plugins: [

new webpack.HotModuleReplacementPlugin()

],

devServer: {

hot: true

}

}

4、exclude