解決Vue打包時(shí)vendor和app.js文件過大的問題

優(yōu)化策略一：CDN引入和代碼分割

在index.html文件中，我們可以通過CDN引入vue、vuex、vue-router等核心庫，減少本地資源的占用。在webpack的配置中，我們可以采用代碼分割的策略，將第三方庫和應(yīng)用程序代碼分離打包。這樣，不僅可以減小vendor和app.js文件的大小，還能加速頁面的加載速度。具體步驟包括在build目錄下的webpack.base.conf.js文件中進(jìn)行修改，刪除在main.js、router.js等文件中的直接導(dǎo)入語句，并引入路由懶加載策略。通過這種方式，我們可以有效地將打包后的代碼拆分成多個(gè)js文件，從而減小單個(gè)文件的體積。

優(yōu)化策略二：關(guān)閉生產(chǎn)環(huán)境下的SourceMap

在config目錄下的index.js文件中，我們可以將productionSourceMap設(shè)置為false，避免生成map文件。map文件主要用于調(diào)試，但在生產(chǎn)環(huán)境下，它的存在會(huì)增加文件體積并可能泄露源代碼信息。關(guān)閉SourceMap可以進(jìn)一步優(yōu)化打包大小，提高資源加載速度。

為啥開發(fā)app不建議使用uniapp？

雖然uniapp提供了一種快速開發(fā)跨平臺(tái)應(yīng)用的方式，但也存在一些需要注意的問題。uniapp的開發(fā)對JS的要求較高，對于一些對JS掌握不夠深入的開發(fā)者來說，可能會(huì)面臨一些挑戰(zhàn)。雖然uniapp內(nèi)置了HTML5+引擎，可以調(diào)用豐富的原生能力，但在小程序及H5等平臺(tái)上使用時(shí)需要注意條件編譯。對于使用uni-app開發(fā)的應(yīng)用，如果刪除了uni.js和uniapp.config.js文件，可能需要進(jìn)一步檢查項(xiàng)目的其他文件內(nèi)容。總體來說，是否選擇使用uniapp進(jìn)行開發(fā)取決于項(xiàng)目的具體需求和開發(fā)團(tuán)隊(duì)的技能水平。

uniapp的評(píng)價(jià)

對于uniapp的評(píng)價(jià)，可以從以下幾個(gè)方面進(jìn)行考慮：

1. 優(yōu)點(diǎn)：uniapp的寫法基于vue，上手快，原生功能滿足需求且配置簡單明了。一次開發(fā)可多端變現(xiàn)的特點(diǎn)也備受好評(píng)。特別是在APP端的開發(fā)體驗(yàn)上，與小程序類似且流暢度高。uniapp還支撐著龐大的生態(tài)應(yīng)用框架。

2. 場景適用性：在某些特定場景下，如需要快速開發(fā)跨平臺(tái)應(yīng)用且團(tuán)隊(duì)對vue熟悉的情況下，可以考慮使用uniapp作為技術(shù)選型。初次體驗(yàn)來看，uniapp的表現(xiàn)是令人滿意的。

3. 技術(shù)特點(diǎn)：雖然uniapp具有多種優(yōu)點(diǎn)，但也需要注意其技術(shù)特點(diǎn)可能帶來的問題。例如組件調(diào)用原生能力時(shí)與某些第三方庫可能存在兼容性問題。對于廣告變現(xiàn)等特定需求，也需要謹(jǐn)慎選擇和使用相關(guān)工具和策略。總體來說，uniapp是一個(gè)值得關(guān)注和嘗試的開發(fā)框架，但在使用過程中需要根據(jù)項(xiàng)目需求和技術(shù)特點(diǎn)進(jìn)行合理的選擇和配置。

對于Vue打包過程中遇到的vendor和app.js文件過大的問題以及關(guān)于是否使用uniapp進(jìn)行開發(fā)的討論，我們可以從優(yōu)化策略、技術(shù)特點(diǎn)和使用場景等多個(gè)角度進(jìn)行考慮和決策。在實(shí)際開發(fā)過程中，根據(jù)項(xiàng)目的具體需求和團(tuán)隊(duì)的技術(shù)水平選擇適合的開發(fā)框架和策略是關(guān)鍵所在。uniapp與mpvue、app及微信小程序的差異與聯(lián)系

一、mpvue與uniapp的關(guān)聯(lián)及差異

mpvue是基于vue的框架，優(yōu)化了vue的runtime和compiler實(shí)現(xiàn)，曾用于小程序開發(fā)。但后來停止維護(hù)，導(dǎo)致原有用戶與微信小程序之間存在一定斷層。這是因?yàn)樵缙谟脩魞H通過微信開放平臺(tái)賬號(hào)的openid進(jìn)行身份確認(rèn)，缺乏unionid這一微信官方賬號(hào)機(jī)制的關(guān)鍵標(biāo)識(shí)。當(dāng)這些用戶在微信小程序和基于mpvue的應(yīng)用間切換時(shí)，身份識(shí)別變得困難。

而uniapp則是一個(gè)開放的、支持多種開發(fā)工具的多端開發(fā)框架，其特色在于一套代碼可以適配多個(gè)平臺(tái)。它解決了開發(fā)者在不同平臺(tái)重復(fù)編寫代碼的痛點(diǎn)，大大提高了開發(fā)效率和用戶體驗(yàn)。

二、uniapp與app的關(guān)系

uniapp與app存在顯著區(qū)別。App主要面向某一特定平臺(tái)，如安卓或iOS，而uniapp則可實(shí)現(xiàn)跨平臺(tái)開發(fā)，一套代碼同時(shí)適用于多個(gè)平臺(tái)。這意味著開發(fā)者無需為每個(gè)平臺(tái)單獨(dú)編寫代碼，大大節(jié)省了開發(fā)時(shí)間和成本。由于uniapp的跨平臺(tái)特性，它可以輕松地將已有的web技術(shù)應(yīng)用到移動(dòng)應(yīng)用中。

三、uniapp的開發(fā)能力

uniapp使得單人開發(fā)成為可能。只要掌握編程技術(shù)，即使是微信小游戲的開發(fā)也不在話下。目前，許多開發(fā)者正在使用由mui團(tuán)隊(duì)開發(fā)的uniapp框架，開發(fā)各類應(yīng)用，如簡易版的頭條等。這些應(yīng)用涵蓋了文章、專家、訂閱、評(píng)論等多種功能。通過使用flex布局和優(yōu)化promise請求等手段，開發(fā)者可以更加高效地構(gòu)建應(yīng)用。

四、開發(fā)工具與環(huán)境的構(gòu)建

在開發(fā)工具方面，uniapp可以使用HBuilderX等開發(fā)工具進(jìn)行開發(fā)。與此對于安卓app的開發(fā)，開發(fā)者需要構(gòu)建Native環(huán)境，這時(shí)AndroidStudio是不可或缺的開發(fā)工具。而uni-app框架則可以在安卓、IOS、H5等多端構(gòu)建app應(yīng)用，大大簡化了跨平臺(tái)開發(fā)的復(fù)雜性。

五、uniapp打包后重新引用

對于已經(jīng)打包的uniapp項(xiàng)目，如果需要重新引用，可以按照以下步驟進(jìn)行：使用uniapp的打包命令將項(xiàng)目打包成特定平臺(tái)的文件。然后，將打包生成的文件復(fù)制至需要引用的項(xiàng)目或頁面目錄下。接著，根據(jù)項(xiàng)目的具體結(jié)構(gòu)和打包生成的文件路徑，調(diào)整引用資源的路徑，確保相關(guān)的腳本、樣式和其他資源能夠正確加載。如果項(xiàng)目中涉及到環(huán)境變量的配置，還需在新項(xiàng)目或頁面中進(jìn)行相應(yīng)的配置。

uniapp以其跨平臺(tái)的特性、高效的開發(fā)效率和廣泛的開發(fā)工具支持，成為了現(xiàn)代移動(dòng)應(yīng)用開發(fā)的熱門選擇。無論是開發(fā)者還是用戶，都能從中享受到其帶來的便利和效益。