Webpack构建速度优化

前言

当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。

目录

• 缩小范围
• noParse
• IgnorePlugin
• 优化 resolve 配置
• externals
• 缓存

缩小范围

在配置 loader 的时候，我们需要更精确的去指定 loader 的作用目录或者需要排除的目录，通过使用 include 和 exclude 两个配置项，可以实现这个功能，常见的例如：

• include：符合条件的模块进行解析
• exclude：排除符合条件的模块，不解析，优先级更高

这样一来，一开始构建，我们就能去除一些选项，比如，在使用babel-loader的时候

{test: /\.jsx?$/,use: [{loader: 'babel-loader',options: {presets: ['@babel/preset-env', '@babel/react'],plugins: [[require('@babel/plugin-proposal-decorators'), { legacy: true }]],cacheDirectory: true, // 启用缓存},},],include: path.resolve(__dirname, 'src'),exclude: /node_modules/,
 }, 

noParse

对于我们引入的一些第三方包，比如jQuery，在这些包内部是肯定不会依赖别的包，所以根本不需要webpack去解析它内部的依赖关系，使用 noParse 进行忽略的模块文件中不会解析 import、require 等语法

module：{noParse：/jquery|lodash/
} 

IgnorePlugin

有很多的第三方包内部会做国际化处理，包含很多的语言包，而这些语言包对我们来说时没有多大用处的，只会增大包的体积，我们完全可以忽略掉这些语言包，从而提高构建效率，减小包的体积。

用法

• requestRegExp 表示要忽略的路径。
• contextRegExp 表示要忽略