摘要：检查的时候发现中的确用到了，所以不会把去掉。在项目中，注意要把设置，避免将模块转为规范。引入的模块包，也必须是符合规范，并且在最新的中加了一条限制，即在中定义，这也是为了避免出现导致模块内部的一些函数执行后影响全局环境，却被去除掉的情况。
在上周末广州举办的feday中，webpack的核心开发者Sean在介绍webpack插件系统原理时，隆重介绍了一个中国学生于Google夏令营，在导师Tobias带领下写的一个webpack插件，webpack-deep-scope-analysis-plugin，这个插件能够大大提高webpack tree-shaking的效率。
tree-shaking目前的缺陷tree-shaking 作为 rollup 的一个杀手级特性，能够利用ES6的静态引入规范，减少包的体积，避免不必要的代码引入，webpack2也很快引入了这个特性，但是目前，webpack只能做比较简单的解决方案，比如：
import { isNumber, isNull } from "lodash-es"
export function fun1() {
// do something
}
export function isNull(...args) {
return isNull(...args)
}
这个例子中，webpack会寻找引入变量的引用，当发现没有对isNumber的引用时，就会去除isNumber的代码。这其实不太实用，毕竟在现在的vscode中，没有引用的变量在ide中都会灰显提示，一般不会犯这种import某个模块却不用的错误了。
如果是接下来这种引入方式呢，我写了一个demo如下
这个例子非常简单，如果用图来表示是这样
在index.js中引入了func.js中的func2，并没有引入func1，但是func1引入了lodash。webpack检查的时候发现func.js中的确用到了lodash，所以不会把lodash去掉。实际上，我们根本没用到它。
webpack-deep-scope-analysis-plugin就可以解决这种判断。
插件效果引入前
引入后
85.8kb -> 不到1kb
当然，我这里是标题党了，因为这里直接把一个lodash库给去掉了，所以变化才这么惊人。但是即使在实际项目中，我们也能轻易用一个插件减少大量的不必要的引入。
原理原理方面，可以参考作者的Medium文章，解释得非常清楚，这里不做赘述。
webpack的原理，其实就是遍历所有的模块，把它们打包成一个文件，在这个过程中，它就知道哪些export的模块有被使用到。那我们同样也可以遍历所有的scope（作用域），简化没有用到的scope，最后只留下我们需要的。
我们提到的这个webpack插件，正是内置了这样一个scope分析器，它能够从入口文件中分析出scope的引用关系，最后排除掉所有没有用到的模块。
当然，这个插件也并不是自己做了所有的事情，它也是依赖于了前人的工作。 escope 是一个分析ES中scope的工具，插件作者将它改成了ts版本集成到了插件中，并且利用了webpack暴露的接口，可以解析出来的模块的AST树，基于这个AST就可以交给escope分析出scope的引用关系。
最佳实践一些使用此插件的特殊情况也可以参考作者的原Medium文章。
首先，要用到tree-shaking，必然要保证引用的模块都是ES6规范的。这也是为什么我在前面的demo中，引入的是lodash-es而不是lodash。
在项目中，注意要把babel设置module: false，避免babel将模块转为CommonJS规范。引入的模块包，也必须是符合ES6规范，并且在最新的webpack中加了一条限制，即在package.json中定义sideEffect: false，这也是为了避免出现import xxx导致模块内部的一些函数执行后影响全局环境，却被去除掉的情况。
未来当时跟这位插件作者沟通，他说将来有可能Tobias会把这个插件内置到webpack中，这也是符合webpack4零配置的趋势。但是我们也看得到，要将前端工程的dead code elimination做到和其他静态语言一样好，靠这些工具是远远不够的，模块自身也必须配合做到符合规范。
参考链接：github项目地址：https://github.com/vincentdch...
Medium博客地址：https://medium.com/webpack/be...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97585.html
摘要：接近边缘也许缩小这一差距并抓住真正潜力的最大机会将来自边缘计算。结合边缘，这些连接优势是巨大的并且可以推动重大的数字化转型计划。 多年来，5G的宣传一直是一个越来越响亮的鼓点，在各个行业，它所能带来的价值是显而易见的。零售商和杂货店正在利用仓库内的联网机器人来搬运和堆放物资。能源行业有现场车辆，提取引擎由控制中心管理，摄像头通过5G向操作员提供清晰的视频。在医疗保健领域，5G提供患者数据...
摘要：优刻得数据安全流通平台安全屋的出现，可以说恰逢其时。未来，我们期待优刻得的安全屋产品继续在数据流通中发挥安全堡垒作用，服务更多的政企客户。UCloud优刻得政府事业部解决方案架构师张静如接受信息化和软件服务网采访时表示：政府数字化转型需要加强对数据的整合、治理。她指出，数字化转型已成为各方共识，政府数字化转型不仅要加强数字化治理能力，更要充分发挥数据价值。伴随数字政府建设迈入深水区，数据作为...
摘要：原文译者插件能够将引擎的全部潜力暴露给第三方的开发者。当将一个插件应用到环境中，这个插件将会获得一个对于这个的引用。表示有关模块资源，已编译资源，已更改文件和监视依赖关系的当前状态的信息。 原文：how to write a plugin 译者：neal1991 welcome to star my articles-translator , providing you advanc...
摘要：在本次发布会上，李彦宏表示百度云是云计算大数据人工智能的三位一体，并阐述了他对于未来云计算发展的深入思考。作为发布会的第一位演讲嘉宾，李彦宏讲述了百度云的发展战略。百度云计算战略发布会 百度云计算战略发布会在北京举行，百度董事长兼CEO李彦宏、中国工程院院士倪光南、百度首席科学家吴恩达、百度云计算事业部总经理刘炀，以及来自英特尔、诺禾致源、民生银行、全民TV、太原铁路局的众多合作伙伴和主流...
摘要：未来市场发展潜力可期如果说，云计算的市场已被巨头和先进入者夺得优势，那么则还是一片蓝海。通过技术不断创新积累，深入到企业应用领域，赢得市场，为应用交付资源管理运维效率业务支撑提供了基于新一代架构的重要支撑体系。2017年年初，数人云也对外宣布已完成5000万人民币A＋轮融资，此次融资由沣源资本领投，云启资本、唯猎资本以及UCloud等A轮投资方继续跟投。灵雀云于2017年11月宣布完成B轮，...
阅读 3207·2021-11-17 09:33
阅读 3293·2021-11-15 11:37
阅读 2952·2021-10-19 11:47
阅读 3204·2019-08-29 15:32
阅读 1005·2019-08-29 15:27
阅读 1529·2019-08-29 13:15
阅读 935·2019-08-29 12:47
阅读 2025·2019-08-29 11:30
