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