Lodash引入

Lodash引入

lodash按需引入

引入方式

import { random } from 'lodash/random'
// import { debounce} from 'lodash/function'

打包后，可以看出webpack只打包了lodash中的random方法，文件大小也由531kb变成了2.32kb，大大减少了项目的体积

另一种是在Webpack打包后

当你一个一个引入lodash方法感到麻烦，所以进行了全引入lodash，打包时，可以利用lodash-webpack-plugin插件，进行移除没有使用的lodash的方法，这样会让代码更加的简洁；

引入

$ npm i -S lodash-webpack-plugin babel-plugin-lodash babel-core babel-loader babel-preset-es2015 webpack

配置

webpack.config.js
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');
module.exports = {
 module: {
 loaders: [{
 loader: 'babel',
 test: /\.js$/,
 exclude: /node_modules/,
 query: {
 plugins: ['transform-runtime', 'lodash'],
 presets: ['es2015']
 }
 }]
 },
 plugins: [
 new LodashModuleReplacementPlugin,
 new webpack.optimize.OccurrenceOrderPlugin,
 new webpack.optimize.UglifyJsPlugin
 ]
}

其中babel-plugin-lodash的配置，也就是plugins: [‘lodash’] ，并不是一定要在loaders中，也可以单独定义babel。

webpack.config.js
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');
module.exports = {
 module: {
 loaders: [{
 loader: 'babel',
 test: /\.js$/,
 exclude: /node_modules/
 }]
 },
 babel: {
 presets: ['es2015'],
 plugins: ['transform-runtime', 'lodash']
 },
 plugins: [
 new LodashModuleReplacementPlugin,
 new webpack.optimize.OccurrenceOrderPlugin,
 new webpack.optimize.UglifyJsPlugin
 ]
}

又或者是.babelrc文件中。

以上工作完成了，在每个你需要使用 lodash 函数的文件中只需要引用一次 lodash，即可调用任意函数而不会造成完全打包。

import _ from 'lodash'
_.add(1, 2) // 打包时只会引入这一个函数模块

注意：必须要使用 ES2015 的模块引用方式才有效。