lodash按需載入

lodash提供了很多可用的方法供我們使用，是乙個很好用且用起來得心應手的工具庫。但是同時，lodash的體積也不小，我們在使用的時候可能只是使用了幾個方法，但是卻把整個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配置

}

import 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", ]] 禁止轉換模組，交由webpack進行模組化處理

5）.結合uglifyjs-webpack-plugin

lodash提供了很多可用的方法供我們使用，是乙個很好用且用起來得心應手的工具庫。但是同時，lodash的體積也不小，我們在使用的時候可能只是使用了幾個方法，但是卻把整個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配置

}

import 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", ]] 禁止轉換模組，交由webpack進行模組化處理

5）.結合uglifyjs-webpack-plugin

Vant按需載入

librarydirectory 複製 按需引入vant元件 import from vant 複製 使用vant元件 vue.use datetimepicker use button use list 複製 type primary 按鈕複製 複製 ps 出來vant庫外，像antiui ele...

antd按需載入

antd 是螞蟻金服推出的一套非常好的react ui庫,使用起來特別方便,而且也推出了antd手機端庫,同時還推出了vue的使用方式 import react from react import from antd import antd dist antd.css return 按鈕 在antd...

vue router按需載入

1 import vue from vue 2import router from vue router 34 vue.use router 5 按需載入,當渲染其他頁面時才載入其元件,並快取,減少首屏載入時間 6const index resolve require views index.vue...