webpack学习(三) -- js tree shaking

前言：上文我们说到配置webpack的两种方式，命令行配置和配置文件配置。本文再补充一种方式:

• package.json中配置: 在package.json中有一个scripts对象

1.dev为开发环境，可以配置打包环境为development，这时候运行npm run dev，就可以看到文件被打包了;

2.prod为生产环境 npm run prod

3.test为测试环境 npm run test

咳咳。。。步入正题

tree shaking简介

• 啥是tree shaking?
  • 翻译过来就是树抖动，树抖动都是会把叶子都下来，那么代码抖动会都下来什么呢？当然是代码啦~tree shaking会在生产环境下打包时把没有使用到的代码剔除掉，减小打包后js的体积，开发环境下不会剔除。

js tree shaking

案例说话

• 在sum文件中有两个模块aaa和isArray

• index.html文件中引入打包后文件'.dist/main.js'

• index.js文件中引入sum中aaa模块，没有引入isArray模块

• 执行npm run dev，控制台输出正确的打印结果

• 在打包后的main.js文件中搜索aaa，发现能找到

• 再在main.js中找isArray，发现竟然也能找到

这也没有抖动剔除的效果呀，到这是不是觉得我上文说的都是废话╮(╯▽╰)╭，耐心往下看~

上述情况是因为我们刚才执行的是npm run dev,是开发环境下的。接下来让我们看一下生产环境是什么现象。

• 执行npm run prod,打包的是压缩版本,会发现有aaa，没有isArray

所以，在生产环境下，tree shaking就发挥了抖动作用，把没有用到的代码都抖掉

---

提升难度

上述案例是非常简单的，下面我们来挑战一下有难度的知识。

---

loadsh、loadsh-es

loadsh是一个一致性、模块化、高性能的javascript实用工具库，loadsh-es是由loadsh导出的工具库。

• 将loadsh引入页面Js中

• 因现在项目中没有loadsh-es，所以安装loadsh-es

• 将isArray传入一个arg函数，再在loadsh里寻找isArray函数，打印执行这个函数（到这是不是一脸茫然，耐心往下看~）

• 已经知道开发环境不会过滤没用的代码，这里就不演示了，我们直接看生产环境。用npm run prod,会发现，在js没用到isArray的情况下，它还是把Loadsh包打进去了，这就不符合我们之前验证的理论了。

虽然案例中没有用到isArray，但是它分析的时候发现isArray里用到了Loadsh,它只能做当前代码中词法语法的分析，不能做scoped的分析，也就是说不能做js作用域的分析。

解决办法

为了还达到我们最开始的抖动目的,有一个好用的插件推荐给你们~让代码进行深度的抖动

• webpack-deep-scope-plugin

git地址：github.com/vincentdcha…

• 插件使用
  • 下载

  yarn add webpack-deep-scope-plugin
  复制代码

  • 在webpack.config.js配置文件中引入并配置到plugins中

  • 执行npm run prod，发现没有用到的loadsh也被抖掉啦！

---

总结

• tree shaking就是找到我们代码中真正使用的代码，剔除没有被用到的代码。
• 优点：
  • 减少页面的加载时间
  • 不打包没有使用的代码
  • 减小js文件大小，用户使用时减少用户等待时间

---

思考

本文主要讲了js的tree shaking，思考一下css tree shaking是什么意思呢？webpack学习(四)会详细说一下css tree shaking

转载于:https://juejin.im/post/5c9b1e766fb9a070ba314edb