webpack优化

发表于 | 分类于 | |

webpack优化有两个方向优化开发体验、优化输出质量

优化开发体验

优化构建速度

缩小文件搜索范围

  1. 让尽可能少的文件被loader处理。优化正则 ，优化搜索文件范围。
  2. 优化 resolve.modules 用于配置 Webpack 去哪些目录下寻找第三方模块。
  3. 优化 resolve.mainFields
  4. 优化 resolve.alias通过别名来把原导入路径映射成一个新的导入路径
  5. 优化 resolve.extensions 配置。自动带上后缀后去尝试询问文件是否存在

使用DllPlugin

动态链接库。配合DllReferencePlugin使用

执行构建时流程如下：

  1. 如果动态链接库相关的文件还没有编译出来，就需要先把它们编译出来。方法是执行 webpack –config webpack_dll.config.js 命令。
  2. 在确保动态链接库存在时，才能正常的编译出入口执行文件。方法是执行 webpack 命令。这时你会发现构建速度有了非常大的提升。

使用HappyPack

多线程

使用ParallelUglifyPlugin

多线程压缩

优化开发体验

开启自动刷新

在配置文件 webpack.config.js 中设置 watch: true。
或者在执行启动 Webpack 命令时，带上 –watch 参数，完整命令是 webpack –watch。

开启模块热更替

模块热替换的原理和自动刷新原理类似，都需要往要开发的网页中注入一个代理客户端用于连接 DevServer 和网页， 不同在于模块热替换独特的模块替换机制。

优化输出质量

减少用户能感知到的加载时间

区分环境

压缩代码

GZIP，UglifyJS，cssnano

CDN加速

配置publicPath

TreeSharking

提取 公共代码

CommonsChunkPlugin

1
2
3
4
5
6
new CommonsChunkPlugin({
  // 从哪些 Chunk 中提取
  chunks: ['a', 'b'],
  // 提取出的公共部分形成一个新的 Chunk，这个新 Chunk 的名称
  name: 'common'
})

按需加载

提升流畅度

使用Prepack

Prepack 由 Facebook 开源，它采用较为激进的方法：在保持运行结果一致的情况下，改变源代码的运行逻辑，输出性能更高的 JavaScript 代码。 实际上 Prepack 就是一个部分求值器，编译代码时提前将计算结果放到编译后的代码中，而不是在代码运行时才去求值。

Prepack 的工作原理和流程大致如下：

  1. 通过 Babel 把 JavaScript 源码解析成抽象语法树（AST），以方便更细粒度地分析源码；
  2. Prepack 实现了一个 JavaScript 解释器，用于执行源码。借助这个解释器 Prepack 才能掌握源码具体是如何执行的，并把执行过程中的结果返回到输出中。

开启Scope Hoising

Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快， 它又译作 “作用域提升”

Scope Hoisting 的实现原理其实很简单：分析出模块之间的依赖关系，尽可能的把打散的模块合并到一个函数中去，但前提是不能造成代码冗余。 因此只有那些被引用了一次的模块才能被合并
由于 Scope Hoisting 需要分析出模块之间的依赖关系，因此源码必须采用 ES6 模块化语句，不然它将无法生效。