lodash provides a number of methods available for our use, it is definitely a very easy to use and handy tool library with them. But at the same time, lodash volume is not small, large Karma 522K we used in the project, may just be using several methods, but yet the whole lodash library introduced. In order to eat a few fish, fish ponds on the entire contract, the price a little big!
For this problem, there are several options to choose from.
A introduction of a single function
After lodash whole is installed, reference: lodash / function format, the introduction of a single function, such as
let _trim= require('lodash/trim') 或者 import trim from 'lodash/trim'
Or lodash NPM Each function has a separate release module, and a reference part of the module installed separately, and references in the following manner
let _trim= require('lodash.trim') 或者 import trim from 'lodash.trim'
trim(' 123123 ')
II. With lodash-webpack-plugin, babel-plugin-lodash plug optimization
Using the above two methods, in the case where one more method of lodash, very beautiful, and is not convenient. Then we can by means of lodash-webpack-plugin, remove the module is not introduced, needs and babel-plugin-lodash with the use of plug-ins. Webpack similar to the tree-shaking.
1) Plug: npm i -S lodash-webpack-plugin babel-plugin-lodash
2) webpack.conf.js in
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
plugins: [ new LodashModuleReplacementPlugin()]
3）.babelrc中配置 "plugins": ["transform-runtime","transform-vue-jsx","lodash"]
Or disposed of rules webpack.conf.js
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: [resolve('src'), resolve('test')]
options: {plugins: ['lodash']}
}