1.缩小文件搜索范围

1）优化 loader 配置

由于 Loader 对文件的转换操作很耗时，需要让尽可能少的文件被 Loader 处理，可以通过 include 去命中只有哪些文件需要被处理。

module.exports = {
     module: {
       rules: [      {
           // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能        test: /\.js$/,        // babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启        use: ['babel-loader?cacheDirectory'],        // 只对项目根目录下的 src 目录中的文件采用 babel-loader        include: path.resolve(__dirname, 'src'),      },    ]  },};

2）优化 resolve.extensions 配置

在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在。如果这个列表越长，或者正确的后缀在越后面，就会造成尝试的次数越多。

后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。

频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。

在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 require(’./data’) 写成require(’./data.json’)。

module.exports = {
     resolve: {
       // 尽可能的减少后缀尝试的可能性    extensions: ['js'],  },};

3）优化 module.noParse 配置

module.noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析处理，例如 jQuery 、ChartJS，它们庞大又没有采用模块化标准，让 Webpack 去解析这些文件耗时又没有意义。

const path = require('path');module.exports = {
     module: {
       // 独完整的 `react.min.js` 文件就没有采用模块化，忽略对 `react.min.js` 文件的递归解析处理    noParse: [/react\.min\.js$/],  },};

注意被忽略掉的文件里不应该包含 import 、 require 、 define 等模块化语句，不然会导致构建出的代码中包含无法在浏览器环境下执行的模块化语句。

2.使用DllPlugin

以 .dll 为后缀的文件，被称为动态链接库。一个动态链接库中可以包含给其他模块调用的函数和数据。

给 Web 项目构建接入动态链接库：

把网页依赖的基础模块抽离出来，打包到一个个单独的动态链接库中去。一个动态链接库中可以包含多个模块。

当需要导入的模块存在于某个动态链接库中时，这个模块不能被再次被打包，而是去动态链接库中获取。

页面依赖的所有动态链接库需要被加载。

动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。由于动态链接库中大多数包含的是常用的第三方模块，例如 react、react-dom，只要不升级这些模块的版本，动态链接库就不用重新编译

3.使用 HappyPack

运行在 Node.js 之上的 Webpack 是单线程模型的，

但是HappyPack 可以让 Webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

在整个 Webpack 构建流程中，最耗时的流程可能就是 Loader 对文件的转换操作了，因为要转换的文件数据巨多，而且这些转换操作都只能一个个挨着处理。 HappyPack 的核心原理就是把这部分任务分解到多个进程去并行处理，从而减少了总的构建时间。

4.使用 ParallelUglifyPlugin

当 Webpack 有多个 JavaScript 文件需要输出和压缩时，原本会使用 UglifyJS 去一个个挨着压缩再输出，但是 ParallelUglifyPlugin 则会开启多个子进程，把对多个文件的压缩工作分配给多个子进程去完成，每个子进程其实还是通过 UglifyJS 去压缩代码，但是变成了并行执行。所以 ParallelUglifyPlugin 能更快的完成对多个文件的压缩工作。

转载地址：http://izrgn.baihongyu.com/

你可能感兴趣的文章