从前有匹马叫代码
心若没有栖息的地方,到哪里都是流浪

《深入浅出Webpack》优化篇 03

今天的主要内容仍然是构建部分的优化,本文主要内容如下:

  1. happypack
  2. webpack-parallel-uglify-plugin
    本文主要介绍如何通过happypack和webpack-parallel-uglify-plugin来提高webpack构建时候的速度。

happypack

happypack原理:将Loader转换的任务分解到多个进程中去并行处理,从而减少总的构建时间。每次通过new happypack() 实例化一个happypack,就是告诉happypack核心调度器如何通过一系列的Loader去转换文件,并且可以指定如何为转换操作分配子进程。
happypack使用:

yarn add happypack -D

示例代码:

构建过程:

解析:
在实例化happypack的时候可以传递id和loaders两个参数,happypack就是根据id和loaders来知道哪些文件用哪些loader去解析。除了这两个参数以外,happypack支持的额外参数有:

  • threads 开启几个子进程去解析,默认是3个。
  • verbose 是否允许输出日志,默认true
  • threadPool:代表共享进程池,即多个happypack实例都使用同一个共享进程池中的子进程去处理任务,防止占用资源过多
    例如:

    构建过程如下:

webpack-parallel-uglify-plugin

我们在发布线上版本时候,通常会压缩我们的代码,压缩代码是一个非常耗时的工作,比如压缩JS,需要先将js解析成ast,然后对应着使用各种规则分析处理ast,整个过程计算量非常大。
parallelUglifyPlugin 可以开启多个几子进程压缩代码,原本是使用UglifyJS一个一个压缩,现在是好多个一起压缩,虽然还是用UglifyJS压缩,但是干活的人(进程)多了,速度自然也成倍提升
使用方法:

构建过程如下:

主要参数:
test:使用正则匹配哪些文件需要被压缩,默认为/.js$/
include:使用正则命中需要被压缩的文件,默认是[]
exclude:与include功能正好相反,用法默认值都一样
cacheDir:缓存压缩的结果,默认不会缓存,如果需要开启缓存,将该属性的值设置为一个路径
workerCount:开启几个子进程去并发压缩,默认为当前计算机cpu核数减去1
sourceMap:是否输出sourceMap,构建过程会变慢
uglifyJS:一个object类型的值,用于压缩ES5代码的配置,会被传递给UglifyJS作为参数
uglifyES:压缩ES6的,会被传递给UglifyES作为参数

以上就是今天的内容

posted on 2021-12-20 21:13  从前有匹马叫代码  阅读(82)  评论(0编辑  收藏  举报