5-8~9 webpack 性能优化（1）

简介

接下来几节，我们一起学习如何优化 webpack 性能，提升打包速度。

1. 跟上技术的迭代，使用最新的依赖

首先，webpack 版本在迭代更新的过程中会做很多的优化。同样的道理， webpack 打包依赖的 node ，npm ，yarn，也应尽可能使用新版本。

2. 在尽可能少的模块上应用 loader

使用 loader 对源码分析是需要消耗时间的，那么不需要使用的 loader 的地方我们就不要使用。比如，对 js 文件使用 babel-loader，使其兼容 es5 时，我们可随意使用 exclude 排除 node_modules。或者，有时候，我们只需要对某些明确地文件进行处理时，我们可以使用 include。

3. plugin 尽可能精简并确保可靠

不需要使用的 plugin 应该精简，比如 dev 环境下我们并不需要去压缩代码，那么诸如：uglifyjs-webpack-plugin，terser-webpack-plugin，optimize-css-assets-webpack-plugin 等。 另外，因为 webpack 的插件非常多，选用的时候尽可能选择官方推荐或者已经比较成熟经过验证的插件。

4. resolve 参数合理配置

resolve 用来设置模块如何被解析。 比如，extensions 自动解析确定的扩展。默认值为：

extensions: [".js",  ".json"]

所以我们在引入上述模块的时候不需要写后缀名也能找到，如：

import File from '../path/to/file'

我们在使用 React 编写代码时，会使用 jsx 后缀，那么为了方便我们通常也会配置：

extensions: [".js",  ".jsx", ".json"]

但是这里并不是配置越多越好，比如各种样式后缀，或者 .json 其实也可以不需要。 再看这个属性 alias，用来创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
}

设置别名前，我们使用相对路径导入，就像这样：

import Utility from '../../utilities/utility';

现在可以这样使用别名：

import Utility from 'Utilities/utility';

同样的，别名也不是越多越好，按需设置。