在VueCli3.0 中使用Lodash

優(yōu)化在開發(fā)時(shí)的編程體驗(yàn),減少在部署時(shí)的體積。

開發(fā)時(shí) import _ from "lodash";

這種方式依賴清晰,可讀性好,強(qiáng)烈推薦。

您可能覺得每次使用lodash寫一下這句話很麻煩,相信我,這樣是值得的。

部署時(shí)優(yōu)化

為了import _ from "lodash"; 也能夠按需打包,需要安裝

npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack

接著修改 vue.config.js


const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const production = process.env.NODE_ENV === "production";
module.exports = {
  
  chainWebpack: config => {
    if (production) {
      config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin());
      //生產(chǎn)環(huán)境才開啟 不然開發(fā)時(shí)lodash函數(shù)不起作用 也不報(bào)錯(cuò)
    }
  },
};

我的項(xiàng)目用了reduce這個(gè)函數(shù),打包體積變?yōu)?.1KB

image.png

沒看到效果,建議關(guān)掉重啟再試一下。

github 地址 : https://github.com/xiaodun/sf-time-killer

好文推薦:

為什么我從vue轉(zhuǎn)到了react?

強(qiáng)大而難懂的迭代器

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前端將大型項(xiàng)目分成一個(gè)個(gè)單獨(dú)的模塊,一般封裝好的每個(gè)模塊都會(huì)實(shí)現(xiàn)一個(gè)目的明確的完成的功能。如何處理這些模塊以及模塊...
    pixels閱讀 3,501評(píng)論 1 14
  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設(shè)計(jì)架構(gòu)和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 3,150評(píng)論 1 4
  • 今天周六,天氣很好,文暢去他爺爺家玩了 一上午,下午回來怎么也不想寫作業(yè),真是玩到放飛自我了,哎!馬上就開學(xué)了,咋...
    文暢媽媽閱讀 197評(píng)論 0 0
  • 最壞的自己到最好的自己,距離拉拉扯扯,淹沒城市的人來人往中。潛心認(rèn)識(shí)一下許是陌生的自己,還有這個(gè)世界,晚安,好夢(mèng)。
    阿純與她的喵閱讀 215評(píng)論 0 0
  • 股票投資 技術(shù)派總結(jié)出來的規(guī)律的本質(zhì)是人的思維方式和習(xí)慣在證券交易上的反映,是人性的反映,也是自然規(guī)律的反映。 例...
    威樂河灣閱讀 200評(píng)論 0 0

友情鏈接更多精彩內(nèi)容