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/