vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例
一、為開發(fā)模式與發(fā)布模式指定不同的打包入口
vue ui創(chuàng)建的項(xiàng)目，隱藏了webpack配置，可以在src根目錄新建一個(gè)vue.config.js配置文件。在配置文件中向外導(dǎo)出配置對(duì)象。
2.默認(rèn)情況下，vue項(xiàng)目的開發(fā)模式和發(fā)布模式，共用一個(gè)打包的入口文件即（src/main.js）?？梢允褂胏onfigureWebpack或chainWebpack來定義webpack的打包配置
把main.js文件改為main-dev.js。 復(fù)制一份main.js改為main-prod.js
二、通過externals加載外部CDN資源
默認(rèn)情況下，通過import語法導(dǎo)入的第三方依賴包，最終會(huì)被打包合并到同一個(gè)文件中，從而導(dǎo)致打包成功后，單文件體積過大的問題（我們import進(jìn)的css樣式表，也會(huì)打包到同一個(gè)文件中，導(dǎo)致文件過大） 。
為了解決上述問題，可以通過webpack的externals節(jié)點(diǎn)，來配置并加載外部的CDN資源。凡是聲明在externals中的第三方依賴包，都不會(huì)被打包合并到最終的文件中去。
① 配置webpack的externals節(jié)點(diǎn)，在發(fā)布階段配置
聲明在externals中的第三方依賴包，都不會(huì)被打包，項(xiàng)目會(huì)在用到依賴包時(shí)在window全局中去查找對(duì)應(yīng)的對(duì)象。所以需要在index.html文件中引入CDN中的js和css資源,以便可以在全局中找到
需要在public/index.html文件的頭部，添加如下的CDN資源引用：
具體操作流程：
① 在 main-prod.js 中，注釋掉nprogress和quill引用的css文件
② 在 index.html 的頭部區(qū)域中，通過 CDN 加載nprogress和quill 的 js 和 css 樣式
③ 在 index.html 的頭部區(qū)域中，通過 CDN 加載其余依賴的js
可以通過staticfile CDN來查找到對(duì)應(yīng)的開源庫
使用CDN之前的文件大?。?br />
使用CDN之后的文件大小：
三、通過CDN優(yōu)化ElementUI的打包
雖然在開發(fā)階段，我們啟用了 element-ui 組件的按需加載，盡可能的減少了打包的體積，但是那些被按需加
載的組件，還是占用了較大的文件體積。此時(shí)，我們可以將 element-ui 中的組件，也通過 CDN 的形式來加
載，這樣能夠進(jìn)一步減小打包后的文件體積
具體操作流程如下：
① 在 main-prod.js 中，注釋掉 element-ui 按需加載的代碼
② 在 index.html 的頭部區(qū)域中，通過 CDN 加載 element-ui 的 js 和 css 樣式
完成后的文件大?。?br />
四、首頁內(nèi)容定制
① 不同的打包環(huán)境下，首頁內(nèi)容可能會(huì)有所不同。我們可以通過插件的方式進(jìn)行定制，插件配置如下：
// 通過plugin('html')：找到html插件。 通過tap()：可以修改這個(gè)插件里面的固定配置項(xiàng)
// 通過args：可以拿到當(dāng)前這個(gè)插件的一些相關(guān)參數(shù)。
// 在args[0]中添加自定義的屬性isprod,當(dāng)在開發(fā)階段時(shí)，賦值為true，發(fā)布階段時(shí)，賦值為false
② 在public/index.html首頁中，可以根據(jù)isProd的值，開決定如何渲染頁面結(jié)構(gòu)
五、使用路由懶加載
當(dāng)打包構(gòu)建項(xiàng)目時(shí)，所有路由對(duì)應(yīng)的組件都會(huì)打包到一個(gè)文件中，導(dǎo)致文件過大，影響頁面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。
到此這篇關(guān)于vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例的文章就介紹到這了,更多相關(guān)vue項(xiàng)目?jī)?yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了基于VUE選擇上傳圖片并頁面顯示，圖片可以刪除的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
小編給大家整理了關(guān)于vue移動(dòng)端日期選擇組件的知識(shí)點(diǎn)總結(jié)，希望能夠給讀者帶來幫助，一起學(xué)習(xí)參考下。2018-02-02
vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)示例
這篇文章主要介紹了vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)示例，在完成Vue項(xiàng)目以后，在上傳到github并實(shí)現(xiàn)預(yù)覽2018-11-11
vue前端性能優(yōu)化之預(yù)加載和懶加載示例詳解
這篇文章主要為大家介紹了vue前端性能優(yōu)化之預(yù)加載和懶加載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue中的change事件無效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3模塊創(chuàng)建runtime-dom源碼解析
這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue2.0和mintui-infiniteScroll結(jié)合如何實(shí)現(xiàn)無線滾動(dòng)加載
這篇文章主要介紹了vue2.0和mintui-infiniteScroll結(jié)合如何實(shí)現(xiàn)無線滾動(dòng)加載,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用Vue實(shí)現(xiàn)網(wǎng)頁截圖和截屏功能
網(wǎng)頁截圖與截屏功能在許多Web應(yīng)用程序中都非常有用,Vue.js作為一個(gè)流行的JavaScript框架,提供了許多工具和庫來簡(jiǎn)化網(wǎng)頁截圖和截屏的實(shí)現(xiàn),本文將介紹如何使用Vue來實(shí)現(xiàn)一個(gè)網(wǎng)頁截圖和截屏功能的示例,包括使用html2canvas庫和vue-cropper庫,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue3之向echarts組件傳值的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12