釋放webpack的真正潛力

xioqua 發(fā)布于2019-08-23 11:51 / 565人閱讀

摘要：檢查的時(shí)候發(fā)現(xiàn)中的確用到了，所以不會(huì)把去掉。在項(xiàng)目中，注意要把設(shè)置，避免將模塊轉(zhuǎn)為規(guī)范。引入的模塊包，也必須是符合規(guī)范，并且在最新的中加了一條限制，即在中定義，這也是為了避免出現(xiàn)導(dǎo)致模塊內(nèi)部的一些函數(shù)執(zhí)行后影響全局環(huán)境，卻被去除掉的情況。

在上周末廣州舉辦的feday中，webpack的核心開發(fā)者Sean在介紹webpack插件系統(tǒng)原理時(shí)，隆重介紹了一個(gè)中國學(xué)生于Google夏令營，在導(dǎo)師Tobias帶領(lǐng)下寫的一個(gè)webpack插件，webpack-deep-scope-analysis-plugin，這個(gè)插件能夠大大提高webpack tree-shaking的效率。

tree-shaking目前的缺陷

tree-shaking 作為 rollup 的一個(gè)殺手級(jí)特性，能夠利用ES6的靜態(tài)引入規(guī)范，減少包的體積，避免不必要的代碼引入，webpack2也很快引入了這個(gè)特性，但是目前，webpack只能做比較簡單的解決方案，比如：

import { isNumber, isNull } from "lodash-es"
export function fun1() {
  // do something
}
export function isNull(...args) {
  return isNull(...args)
}

這個(gè)例子中，webpack會(huì)尋找引入變量的引用，當(dāng)發(fā)現(xiàn)沒有對(duì)isNumber的引用時(shí)，就會(huì)去除isNumber的代碼。這其實(shí)不太實(shí)用，畢竟在現(xiàn)在的vscode中，沒有引用的變量在ide中都會(huì)灰顯提示，一般不會(huì)犯這種import某個(gè)模塊卻不用的錯(cuò)誤了。

如果是接下來這種引入方式呢，我寫了一個(gè)demo如下

這個(gè)例子非常簡單，如果用圖來表示是這樣

在index.js中引入了func.js中的func2，并沒有引入func1，但是func1引入了lodash。webpack檢查的時(shí)候發(fā)現(xiàn)func.js中的確用到了lodash，所以不會(huì)把lodash去掉。實(shí)際上，我們根本沒用到它。

webpack-deep-scope-analysis-plugin就可以解決這種判斷。

插件效果

引入前

引入后

85.8kb -> 不到1kb?

當(dāng)然，我這里是標(biāo)題黨了，因?yàn)檫@里直接把一個(gè)lodash庫給去掉了，所以變化才這么驚人。但是即使在實(shí)際項(xiàng)目中，我們也能輕易用一個(gè)插件減少大量的不必要的引入。

原理

原理方面，可以參考作者的Medium文章，解釋得非常清楚，這里不做贅述。

webpack的原理，其實(shí)就是遍歷所有的模塊，把它們打包成一個(gè)文件，在這個(gè)過程中，它就知道哪些export的模塊有被使用到。那我們同樣也可以遍歷所有的scope（作用域），簡化沒有用到的scope，最后只留下我們需要的。
我們提到的這個(gè)webpack插件，正是內(nèi)置了這樣一個(gè)scope分析器，它能夠從入口文件中分析出scope的引用關(guān)系，最后排除掉所有沒有用到的模塊。

當(dāng)然，這個(gè)插件也并不是自己做了所有的事情，它也是依賴于了前人的工作。 escope 是一個(gè)分析ES中scope的工具，插件作者將它改成了ts版本集成到了插件中，并且利用了webpack暴露的接口，可以解析出來的模塊的AST樹，基于這個(gè)AST就可以交給escope分析出scope的引用關(guān)系。

最佳實(shí)踐

一些使用此插件的特殊情況也可以參考作者的原Medium文章。

首先，要用到tree-shaking，必然要保證引用的模塊都是ES6規(guī)范的。這也是為什么我在前面的demo中，引入的是lodash-es而不是lodash。

在項(xiàng)目中，注意要把babel設(shè)置module: false，避免babel將模塊轉(zhuǎn)為CommonJS規(guī)范。引入的模塊包，也必須是符合ES6規(guī)范，并且在最新的webpack中加了一條限制，即在package.json中定義sideEffect: false，這也是為了避免出現(xiàn)import xxx導(dǎo)致模塊內(nèi)部的一些函數(shù)執(zhí)行后影響全局環(huán)境，卻被去除掉的情況。

未來

當(dāng)時(shí)跟這位插件作者溝通，他說將來有可能Tobias會(huì)把這個(gè)插件內(nèi)置到webpack中，這也是符合webpack4零配置的趨勢(shì)。但是我們也看得到，要將前端工程的dead code elimination做到和其他靜態(tài)語言一樣好，靠這些工具是遠(yuǎn)遠(yuǎn)不夠的，模塊自身也必須配合做到符合規(guī)范。

參考鏈接：

github項(xiàng)目地址：https://github.com/vincentdch...
Medium博客地址：https://medium.com/webpack/be...