随着前端技术的不断发展，前端工程师们想要给用户提供更加快速、流畅、无瑕疵的用户体验，一种更好的 JavaScript 模块打包技术已然崛起——Tree Shaking。
但是，Tree Shaking 不是万能的。在不同的打包工具和不同的项目结构下，Tree Shaking 的表现可能会有所不同。本文将着重探讨非 AOT（Ahead-of-Time）模式下 ES2016/ES7 Tree Shaking 的最佳实践。
什么是 Tree Shaking
Tree Shaking 是 JavaScript 流行的模块打包工具 Webpack 所支持的特性之一。它基于 ES2015 的模块特性 import、export 来标明 Javascript 代码中的依赖关系，然后排除没有被用到的代码，以此来减小代码体积，提高应用性能。也就是说，Tree Shaking 可以大幅度减少代码的体积，从而提高代码的速度。
Tree Shaking 在非 AOT 情况下的最佳实践
首先，我们需要确定在什么情况下，我们可以使用 Tree Shaking。在非 AOT 情况下（即我们在将应用程序部署到服务器或者浏览器之前不会预先编译应用程序），我们可以使用 Tree Shaking 来减小代码量。在这种情况下，Tree Shaking 可以找出模块中未被使用的代码并将其从打包文件中删除。
接下来，我们需要确保使用 Tree Shaking 的环境能够支持 ES2016/ES7 特性，以便打开 Tree Shaking 的开关。同时，我们需要在代码中使用 ES2016/ES7的写法。
下面是一个例子，用于展示使用 Tree Shaking 的方法：
-- -------- ------ - --- - ---- ----------- ------------------- -- ------ ------ -------- --- -- - ------ ------- -------- - ------ -------- --- -- - ------ ----- -------- ------ --- -- -------- -- --- ----- --------- -
在这个例子中，我们引入了 foo 模块中导出的 foo 函数，但是没有使用 bar 函数，因此 bar 函数不应该被包含在最终的打包文件中。
在 Webpack 中配置 Tree Shaking 很简单。只需要在 webpack.config.js 文件中，使用 optimization.minimize 配置：
-------------- - -
-- --- ------
------------- -
--------- -----
------------ -----
--
--其中，usedExports 的值为 true，才能开启 Tree Shaking 。
在分析完这个配置之后，让我们执行构建，并检查输出文件的大小：
- --- --- ----- - ------------ ------ - --- ----- ---- ---- --- -----
如你所见，最终的打包结果只有 123 字节，远小于原始的 343 字节，真正实现了 Tree Shaking 的目标。
总结
至此，我们已经详细介绍了在非 AOT 情况下的 ES2016/ES7 Tree Shaking 最佳实践，希望能帮助前端工程师们更好的理解和应用目前流行的 Tree Shaking 技术，从而优化应用性能，提高用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f92196f6b2d6eab30b6f3f