lodash 如何按需导入

场景:

有时候我们引入一个插件只是为了其中的某一个方法,例如防抖、节流、深拷贝、时间转化,可是我们又希望项目在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等,这些优化的目的就是让我们项目体积变小,网站打开速度更快,用户体验更佳等。

おすすめ

転載: blog.csdn.net/Steven_Son/article/details/127665662