lodash按需引入

lodash提供了很多可用的方法供我们使用，绝对是一个很好用且用起来得心应手的工具库。但是同时，lodash的体积也不小，我们项目中使用的大噶522K，可能只是使用了几个方法，但是却把整个lodash库引入了。为了吃几条鱼，就承包了整个鱼塘，代价有点大呀！

对于这个问题，有几种方案可供选择。

一.引入单个函数

　lodash整个安装完之后，引用方式： lodash/function 格式，单独引入某个函数，如

let _trim= require('lodash/trim') 或者 import trim from 'lodash/trim'

　或者 lodash 中的每个函数在 NPM 都有一个单独的发布模块，单独安装并引用部分模块，然后按以下方式引用

let _trim= require('lodash.trim') 或者 import trim from 'lodash.trim'

trim(' 123123 ')

二.借助 lodash-webpack-plugin，babel-plugin-lodash插件优化

　　使用上述两种方式，在使用较多个lodash中方法的情况下，不太美观，且并不方便。那么我们可以借助于lodash-webpack-plugin，去除未引入的模块，需要和babel-plugin-lodash插件配合使用。类似于webpack的tree-shaking。

　　1）安装插件：npm i -S lodash-webpack-plugin babel-plugin-lodash

　　2）webpack.conf.js中

　　var LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

　　plugins: [ new LodashModuleReplacementPlugin()]

3）.babelrc中配置 "plugins": ["transform-runtime","transform-vue-jsx","lodash"]

　　或者在webpack.conf.js的rules配置

{
  test: /\.(js|jsx)$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
  include: [resolve('src'), resolve('test')]
  options: {plugins: ['lodash']}
}

猜你喜欢