场景:
有时候我们引入一个插件只是为了其中的某一个方法,例如防抖、节流、深拷贝、时间转化,可是我们又希望项目在build打包时只打包我们引入的那个方法,这样可以减少项目的体积,而不是整个lodash(包含所有lodash未使用到的方法)。就好像我们只要吃几条小鱼,不需要吃整个鱼塘的鱼。
全部导入:
import _ from 'lodash'
这种的 _ 就等于整个lodash,对象形式使用
以vue的使用示例:
handle: _.throttle(
() => {
},
500
)
按需导入
import throttle from 'lodash/throttle'
这种是直接取我们需要的方法出来,不需要用对象形式取,因为它本身就是一个方法,直接用就OK。
(跟上面讲的一样,不需要为了几条小鱼承包整个鱼塘)
handle: throttle(
() => {
},
500
)
两者区别
全部导入: 体积是71.5K,gzip压缩后为25.2K
按需导入: 体积为3.7K , gzip压缩后为1.5K
效果显而易见,肯定选体积小的。
后言
事实上诸多种按需导入,例如常见的Element UI等,这些优化的目的就是让我们项目体积变小,网站打开速度更快,用户体验更佳等。