webpack能优化这段代码帮我们规避了对庞大的 node_modules 文件夹或者 bower_components

我们从输入 URL 到显示页面这个过程中，涉及到网络层面的，有三个主要过程：

DNS 解析 TCP 连接 HTTP 请求/响应

HTTP 连接这一层面的优化才是我们网络优化的核心

减少请求次数
减少单次请求所花费的时间

webpack 的优化瓶颈，主要是两个方面：

webpack 的构建过程太花时间 webpack 打包的结果体积太大

##webpack 优化方案

不要让 loader 做太多事情——以 babel-loader 为例

最常见的优化方式是，用 include 或 exclude 来帮我们避免不必要的转译

这段代码帮我们规避了对庞大的 node_modules 文件夹或者 bower_components 文件夹的处理。但通过限定文件范围带来的性能提升是有限的。除此之外，如果我们选择开启缓存将转译结果缓存至文件系统，则至少可以将 babel-loader 的工作效率提升两倍。要做到这点，我们只需要为 loader 增加相应的参数设定：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader?cacheDirectory=true',
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}