lodash的按需引入 ( Vue CLI 3.0 )

6,735 阅读1分钟

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

完整引入

import _ from 'lodash'
// 这个方式 webpack 依然会将整个库打包。
import { random, debounce, findLast } from 'lodash'

按需引入

单独引入

```js
import debounce from "lodash/debounce";
```
当引用的方法过多时,弊端自现。

配合插件:lodash-webpack-plugin

  • 安装
    $ npm i --save lodash
    $ npm i --save-dev lodash-webpack-plugin babel-plugin-lodash
    
  • babel.config.js
      module.exports = {
        plugins: ["lodash"],
      };
    
  • vue.config.js
    const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
    module.exports = {
        chainWebpack: (config) => {
          config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin());
        },
      };
    
    
  • 可以愉快的使用了
    import { debounce } from 'lodash'
    

lodash-es 结合 tree shaking 使用(占个坑,还未尝试)

该库导出为 es 模块

 import { debounce } from 'lodash-es';