摘要:為了讓事情更簡單,允許將組件定義為一個工廠函數,動態地解析組件的定義。只在組件需要渲染時觸發工廠函數,并且把結果緩存起來,用于后面的再次渲染。
庫使用情況
vue
vue-router
axios
muse-ui
material-icons
vue-baidu-map
未優化前首先我們在正常情況下build
當前流行的UI框架如iview,muse-ui,Element UI都支持按需加載,只需稍微改動一下代碼.
修改前:
import MuseUI from "muse-ui" import "muse-ui/dist/muse-ui.css" import "muse-ui/dist/theme-light.css" Vue.use(MuseUI)
修改后:
import appBar from "muse-ui/src/appBar" import toast from "muse-ui/src/toast" import drawer from "muse-ui/src/drawer" import popup from "muse-ui/src/popup" Vue.component(appBar.name, appBar); Vue.component(toast.name, toast); Vue.component(drawer.name, drawer); Vue.component(popup.name, popup);
這里有點麻煩的就是你要把整個項目用到的muse-ui組件都注冊一遍,當然你也可以只在用到的頁面做局部引用.
讓我們來看看使用按需加載后的效果?
在當前項目引用了16個muse-ui組件的情況下 css減少了80kb,js減少了快200kb.
2. 基于DllPlugin 和 DllReferencePlugin 的 webpack 構建優化這一步并沒有對項目產出的文件進行什么優化.而是優化了構建速度.
DllPlugin 預編譯模塊.有點像android開發中的lib Module,或者iOS的framework.
我們可以對項目中用到的vue,vue-router,axios,muse-ui 這些固定的,基本不變動的模塊進行預編譯. 具體操作不在贅述,可以看一下這篇文章,也是我寫的,但是覺得自己沒講利索? .
看一下構建時間的結果對比:
before:38291ms
after :10089ms
項目中多了core.dll.css和core.dll.js 他們就是劃分出來的固定的,基本不變的模塊,所以只需要編譯一次,以后引用就好.有點library的感覺.這樣每次構建省去了構建固定模塊的時間. 時間有38s降到了10s,如果你構建比較頻繁,應該還是很有用的.
3. 異步組件 官方文檔官方文檔是這么介紹的:
在大型應用中,我們可能需要將應用拆分為多個小模塊,按需從服務器下載。為了讓事情更簡單, Vue.js 允許將組件定義為一個工廠函數,動態地解析組件的定義。Vue.js 只在組件需要渲染時觸發工廠函數,并且把結果緩存起來,用于后面的再次渲染。
修改router
before:
import search from "./search.vue" { path: "/search", name: "search", component: search }
after:
const search = resolve => require(["./search.vue"], resolve); { path: "/search", name: "search", component: search }
具體我們來看看改造后的效果:
因為我的項目目前只有7個頁面,即使把頁面都做成異步加載,效果并不是很"喜人",整體縮小了30kb.
再使用別人的組件時,上手教程都會提示讓你在main.js里注冊一下就好.當然這是最省事的辦法.
但是根據項目情況,比如我的項目用到了vue-baidu-map.
如果你按照默認的加載方式,vue-baidu-map是會被打在vendor.js .但其實這個組件我只有某個二級頁面才使用.所以讓我們來調整一下加載位置看看.把注冊的vue-baidu-map放在真正使用它的地方.
這樣,verdor.js 又小了56kb.因為首頁根本用不到vue-baidu-map. 當然這樣會帶來一個問題:當多個頁面使用vue-baidu-map,會出現多個頁面重復打包.
怎么異步加載插件,這個我還沒搞明白...
5. webpack-bundle-analyzerwebpack-bundle-analyzer是用來分析 Webpack 生成的包體組成并且以可視化的方式反饋給開發者的工具.你可以通過命令:
npm run build --report
來查看依賴關系.然后再根據具體情況劃分代碼塊.效果圖就是上面那張花里胡哨的圖...它清楚的告訴你了打包時模塊劃分的情況.
6. 前后對比:638.7kb vs 286.2kb
這還是在未開啟gzip的情況下.
新增一張開啟gzip的截圖,84.8kb,相對最后的優化結果286.2kb是70%的壓縮比...哈哈
在使用ui庫時,盡量使用按需加載方式.
異步加載,官方文檔很詳盡,改造起來也不難,可以試試
合理規劃三方庫的引用.這個聽起來有點龜毛,"收益"可能也不是很高,不過是個調整方向
善用webpack-bundle-analyzer優化項目依賴
服務端開啟 gzip壓縮,誰用誰知道!
如果你能看到這,十分感謝你賞臉聽一個android開發bb前端開發? .
參考Vue SPA(單頁應用)首屏優化實踐
Webpack的dll功能
vue官方文檔-異步組件
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83834.html
摘要:如果我們能把不同路由對應的組件分割成不同的代碼塊,然后當路由被訪問的時候才加載對應組件,這樣就更加高效了。 前言 之前用vuecli做了個博客,是一個單頁面項目,大概有十個路由直接npm run build打包出來,有一個1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先掛載到服務器上試試好家伙...
摘要:主要是首屏加載太慢。文件按需加載如果沒有這個設置,項目首屏加載時會加載整個網站所有的文件,所以將文件拆開,點擊某個頁面時再加載該頁面的是一個很好的優化方法。在中,不要使用的方法引入組件,使用。使用插件,將的值改成。 主要是首屏加載太慢。 大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解決過大的js文件。 ...
摘要:主要是首屏加載太慢。文件按需加載如果沒有這個設置,項目首屏加載時會加載整個網站所有的文件,所以將文件拆開,點擊某個頁面時再加載該頁面的是一個很好的優化方法。在中,不要使用的方法引入組件,使用。使用插件,將的值改成。 主要是首屏加載太慢。 大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解決過大的js文件。 ...
摘要:第一次寫項目,但是在實踐的過程發現了很多坑,這篇文章主要講述的是項目首屏加載過慢的大坑。建議使用,相對來說算是比較快的了。在官方文檔中有相關實現的代碼,很簡單。畢竟首屏加載,優化都得靠了。 第一次寫 vue spa項目,但是在實踐的過程發現了很多坑,這篇文章主要講述的是spa項目首屏加載過慢的大坑。在webpack的配置中,在打包的過程中,會將所有的庫都打包到vendor.js中,所以...
閱讀 3297·2021-11-16 11:45
閱讀 2655·2021-09-22 15:23
閱讀 564·2021-07-30 14:58
閱讀 459·2019-08-30 15:54
閱讀 2235·2019-08-29 16:19
閱讀 3016·2019-08-29 12:45
閱讀 935·2019-08-23 17:57
閱讀 1788·2019-08-23 17:54