vue項目完成后如何實現項目優(yōu)化的示例
一、為開發(fā)模式與發(fā)布模式指定不同的打包入口
vue ui創(chuàng)建的項目,隱藏了webpack配置,可以在src根目錄新建一個vue.config.js配置文件。在配置文件中向外導出配置對象。
2.默認情況下,vue項目的開發(fā)模式和發(fā)布模式,共用一個打包的入口文件即(src/main.js)??梢允褂胏onfigureWebpack或chainWebpack來定義webpack的打包配置
把main.js文件改為main-dev.js。 復制一份main.js改為main-prod.js
二、通過externals加載外部CDN資源
默認情況下,通過import語法導入的第三方依賴包,最終會被打包合并到同一個文件中,從而導致打包成功后,單文件體積過大的問題(我們import進的css樣式表,也會打包到同一個文件中,導致文件過大) 。
為了解決上述問題,可以通過webpack的externals節(jié)點,來配置并加載外部的CDN資源。凡是聲明在externals中的第三方依賴包,都不會被打包合并到最終的文件中去。
① 配置webpack的externals節(jié)點,在發(fā)布階段配置
聲明在externals中的第三方依賴包,都不會被打包,項目會在用到依賴包時在window全局中去查找對應的對象。所以需要在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來查找到對應的開源庫
使用CDN之前的文件大?。?br />
使用CDN之后的文件大?。?br />
三、通過CDN優(yōu)化ElementUI的打包
雖然在開發(fā)階段,我們啟用了 element-ui 組件的按需加載,盡可能的減少了打包的體積,但是那些被按需加
載的組件,還是占用了較大的文件體積。此時,我們可以將 element-ui 中的組件,也通過 CDN 的形式來加
載,這樣能夠進一步減小打包后的文件體積
具體操作流程如下:
① 在 main-prod.js 中,注釋掉 element-ui 按需加載的代碼
② 在 index.html 的頭部區(qū)域中,通過 CDN 加載 element-ui 的 js 和 css 樣式
完成后的文件大?。?br />
四、首頁內容定制
① 不同的打包環(huán)境下,首頁內容可能會有所不同。我們可以通過插件的方式進行定制,插件配置如下:
// 通過plugin('html'):找到html插件。 通過tap():可以修改這個插件里面的固定配置項 // 通過args:可以拿到當前這個插件的一些相關參數。 // 在args[0]中添加自定義的屬性isprod,當在開發(fā)階段時,賦值為true,發(fā)布階段時,賦值為false
② 在public/index.html首頁中,可以根據isProd的值,開決定如何渲染頁面結構
五、使用路由懶加載
當打包構建項目時,所有路由對應的組件都會打包到一個文件中,導致文件過大,影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊,然后當路由被訪問的時候才加載對應組件,這樣就更加高效了。
到此這篇關于vue項目完成后如何實現項目優(yōu)化的示例的文章就介紹到這了,更多相關vue項目優(yōu)化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue3模塊創(chuàng)建runtime-dom源碼解析
這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01vue2.0和mintui-infiniteScroll結合如何實現無線滾動加載
這篇文章主要介紹了vue2.0和mintui-infiniteScroll結合如何實現無線滾動加載,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10