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

你可能感兴趣的:(webpack学习(三) -- js tree shaking)