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']}
}

三.lodash-es結合tree-shaking

lodash-es 是着具備 ES6 模塊化的版本，只需要直接引入就可以。

import {isEmpty,forIn, cloneDeep} from 'lodash-es'

tree-shaking的作用，即移除上下文中未引用的代碼（dead code）

只有當函數給定輸入后，產生相應的輸出，且不修改任何外部的東西，才可以安全做shaking的操作

如何使用tree-shaking？

1）.確保代碼是es6格式,即 export，import

2）.package.json中，設置sideEffects

3）.確保tree-shaking的函數沒有副作用

4）.babelrc中設置presets [["env", { "modules": false }]] 禁止轉換模塊，交由webpack進行模塊化處理

5）.結合uglifyjs-webpack-plugin