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