InfoQ 极客传媒 15 周年庆征文|Webpack 性能优化措施汇总
![InfoQ 极客传媒 15 周年庆征文|Webpack 性能优化措施汇总](https://static001.geekbang.org/infoq/e9/e967f6a6570fbe013237f95023b82fec.jpeg)
一、前言
从事前端开发的童鞋在面试过程中,多少都会遇到以下 2 个有关 webpack 编译过程性能问题:
有哪些方式可以减少
Webpack
的打包时间?有哪些方式可以让
Webpack
打出来的包更小?
二、优化方案
2.1 优化 Loader
对于 Loader
来说,影响打包效率首当其冲必属 Babel
了。因为 Babel
会将代码转为字符串生成 AST
,然后对 AST
继续进行转变最后再生成新的代码,项目越大,转换代码越多,效率就越低。
讲到AST
,这里展开略微讲解一下。相信大部分前端开发童鞋对AST
都会感觉比较陌生,因为AST
这一层大部分是框架处理,一般开发接触不到,导致很多人对AST
都很陌生,
现代前端离不开
AST
,我们用到的React
,Vue
,Angular
,小程序
,这些框架本质上最后都是转换成被浏览器能识别的JavaScript
代码,它们都可以理解成一种DSL
。
对于上面的代码,在项目开发中会写很多这种依赖引入,Webpack
获取这段代码的时候,它应该怎么去识别它?Webpack
编译最开始就是扫描你的代码,抽象成一颗语法树,然后进行词法分析,那这个树就叫抽象语法树,简称 AST,Babel
把 const 专换成 var 就是利用这个特性, 把代码转换成 AST
,然后处理这颗 AST
树,处理完成,然后又生成 code
,同样 Webpack
处理 require,import
依赖,也是在遍历 AST
树。
言归正传,对于如何优化 Loader,首先可以优化 Loader
文件搜索范围:
对于 Babel
来说,只希望作用在 JS
代码上,然后 node_modules
中使用的代码都是编译过的,所以完全没有必要再去处理一遍。
当然这样做还不够,我们还可以将 Babel
编译过的文件缓存起来,下次只需要编译更改过的代码文件即可,这样可以大幅度加快打包时间
受限于 NodeJS
是单线程运行的,所以 Webpack
在打包的过程中也是单线程的,特别是在执行 Loader
的时候,长时间编译的任务很多,这样就会导致任务等待情况发生。
HappyPack
可以将 Loader
的同步执行转换为并行的,这样就能充分利用系统资源来加快打包效率了
2.2 DllPlugin
DllPlugin
可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数,只有当类库更新版本才有需要重新打包,并且也实现了将公共代码抽离成单独文件的优化方案。
接下来就来学习如何使用 DllPlugin
。
首先,我们需要执行这个配置文件生成依赖文件,接下来我们需要使用 DllReferencePlugin
将依赖文件引入项目中
2.3 代码压缩
在 Webpack3
中,我们一般使用 UglifyJS
来压缩代码,但是这个是单线程运行的,为了加快效率,我们可以使用webpack-parallel-uglify-plugin
来并行运行 UglifyJS
,从而提高效率。
在 Webpack4
中,我们就不需要以上这些操作了,只需要将 mode
设置为 production
就可以默认开启以上功能。代码压缩也是必做的性能优化方案,当然不止可以压缩 JS
代码,还可以压缩 HTML
、CSS
代码,并且在压缩 JS
代码的过程中,还可以通过配置实现比如删除 console.log
这类代码的功能。
2.4 一些小的优化点
还可以通过下面所列一些小的优化点来加快webpack
打包速度。
resolve.extensions
:用来表明文件后缀列表,默认查找顺序是['.js', '.json']
,如果你的导入文件没有添加后缀就会按照这个顺序查找文件。应该尽可能减少后缀列表长度,然后将出现频率高的后缀排在前面。resolve.alias
:可以通过别名的方式来映射一个路径,能让Webpack
更快找到路径。module.noParse
:如果你确定一个文件下没有其他依赖,就可以使用该属性让Webpack
不扫描该文件,这种方式对于大型的类库很有帮助。
2.5 减少 Webpack 打包后的文件体积
2.5.1 按需加载
想必大家在开发 SPA 项目的时候,项目中都会存在十几甚至更多的路由页面。如果将这些页面全部打包进一个 JS 文件的话,虽然将多个请求合并了,但是同样也加载了很多并不需要的代码,耗费了更长的时间。为了首页能更快地呈现给用户,首页能加载的文件体积越小越好,这时候就可以使用按需加载,将每个路由页面单独打包为一个文件。当然不仅仅路由可以按需加载,对于 loadash
这种大型类库同样可以使用这个功能。
按需加载的代码实现这里就不详细展开了,因为鉴于用的框架不同,实现起来都是不一样的。虽然不同框架用法可能不同,但是底层实现机制都是一样的。都是当使用的时候再去下载对应文件,返回一个 Promise
,当 Promise
成功以后去执行回调。
2.5.2 Scope Hoisting
Scope Hoisting
会分析出模块之间的依赖关系,尽可能的把打包出来的模块合并到一个函数中去。
比如希望打包两个文件
对于这种情况,打包出来的代码会类似这样
但是如果使用 Scope Hoisting
的话,代码就会尽可能的合并到一个函数中去,也就变成了这样的类似代码
这样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4
中你希望开启这个功能,只需要启用optimization.concatenateModules
就可以了。
2.5.3 Tree Shaking
Tree Shaking
可以实现删除项目中未被引用的代码,比如
对于以上情况,test 文件中的变量 b 如果没有在项目中使用到的话,就不会被打包到文件中。
如果你使用 Webpack 4
的话,开启生产环境就会自动启动这个优化功能。
三、总结
此篇文章主要介绍如何使用 Webpack
去进行性能优化以及如何减少打包时间。
Webpack
版本更新很快,各个版本之间实现优化的方式可能都会有区别,所以没有使用过多的代码去展示如何实现一个功能。此篇博文的内容重点是介绍可以通过什么方式去优化,具体的代码实现可以去官网查根据具体版本对应的代码实现即可。
四、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/5f81a22b1fe6af82267562f27】。文章转载请联系作者。
评论