在創(chuàng)業(yè)公司做前端一年,這些經(jīng)驗(yàn)到底值不值?

作者：大白蘿卜

原文：https://juejin.cn/post/7257076605570646076

之前公司調(diào)整洗牌，裁掉了一大波人，像我這樣做了快一年的，也竟是研發(fā)老員工了...最近領(lǐng)導(dǎo)安排我開始面試，拿到第一份簡歷是一位10年經(jīng)驗(yàn)的前端大佬，看完簡歷后突然蒙圈，我該問什么問題，用過什么框架？ 項(xiàng)目遇到過什么問題？困難是怎么解決的？webpack做過哪些性能優(yōu)化？

誒，想到這，突然覺得哪天我也去投遞簡歷了，很有可能會同樣被問到這些問題，看看自己在現(xiàn)在公司干了快一年了，似乎也沒有做過太多總結(jié)，瞬間感覺不寒而栗。

既然這些都遲早是要總結(jié)的，今天那就來回顧一下， 創(chuàng)業(yè)公司工作一年， 到底收獲了什么？同時也希望我的經(jīng)歷能給大家?guī)硪唤z啟發(fā)。

后臺管理web階段

坐標(biāo)一線城市北京，前面剛來兩三個月一直在做公司后臺系統(tǒng)，使用技術(shù)棧主要是vue2+elementUI，因?yàn)閯倎?，很多業(yè)務(wù)邏輯要熟悉，沒有時間去做優(yōu)化，而且入職第三天就開始寫代碼了。

Tailwind [1]

為了提高寫代碼的效率，正好當(dāng)時看到tailwind，覺得很新奇，就給引入到項(xiàng)目里來了?？梢杂妙惷麃碇苯訒鴮慶ss樣式：

tailwind可以節(jié)省很多編寫類名的腦力， 同時開發(fā)的時候不再需要在style和template來回切換，直接在類名里寫屬性，用起來是真香！而且據(jù)官網(wǎng)介紹，全部使用tailwind編碼之后，css的文件最后打包編譯出來，基本都小于10KB？！因?yàn)橐肓薳lementUI組件庫，也沒法驗(yàn)證，但節(jié)省心智是實(shí)實(shí)在在的。

Drone CI [2]

CI工具，配置之后本地npm run build后會自動提交到drone，它會幫忙完成測試，代碼緩存，cdn刷新等操作，并且可以設(shè)置在自動化部署完成后，出現(xiàn)飛書提醒，整體界面看上去也比較舒服

Sentry [3]

線上日志監(jiān)控，用戶在使用過程中產(chǎn)生了報錯，sentry會實(shí)時發(fā)送提醒，咱們就可以通過日志回放可以分析出錯原因，相當(dāng)于飛機(jī)的黑盒子， 甚至可以回放用戶的操作過程，挺強(qiáng)大的。

官網(wǎng)服務(wù)端渲染

第三個月的時候我們部門接下了公司官網(wǎng)的活，但開發(fā)周期只有半個月，而且當(dāng)時都沒經(jīng)驗(yàn)，領(lǐng)導(dǎo)為了保險起見，就直接讓把vue2的后臺項(xiàng)目讓我們拷了一份，所以官網(wǎng)做的沒有什么新花樣。其實(shí)現(xiàn)在想想，更好的辦法應(yīng)該是使用nuxt.js做服務(wù)端渲染[4]，首屏加載快，還方便做SEO，奈何實(shí)在太菜~

開放圖譜協(xié)議

開放圖譜協(xié)議，全稱叫Open Graph Protocol，可以讓分享的鏈接在社交媒體上以圖文的形式展示出來，比如沒有填寫就是下面這個樣子：

填過之后就是這樣子：

填寫過開放圖譜協(xié)議的話，將網(wǎng)站分享在社交媒體上，鏈接的內(nèi)容更生動，算是一個小優(yōu)化點(diǎn)。

Vue3

做完官網(wǎng)之后，公司又有一個后臺系統(tǒng)，這次需要從0到1搭建，我果斷申請了使用Vue3。只要效果能實(shí)現(xiàn)，老板不會在意用什么方法，那咱就去嘗試嘗試新東西，畢竟也是提升公司的技術(shù)儲備~

這個項(xiàng)目說是從0到1，但實(shí)際開發(fā)為了追求效率，避免踩坑，還是讓調(diào)研了市面上主流的前端集成框架，這次使用的是一個基于Vue3-element-admin的框架。

本來想使用ts進(jìn)行開發(fā)，但考慮到我們團(tuán)隊成員ts都很弱，最后還是放棄了避免踩坑，主要技術(shù)棧是Vue3 + Vite2 + Vue Router + Pinia + Element Plus，還有Volar插件代替了原來Vue2的Vetur。

說下vue3的使用感受吧~

1. vite啟動速度極快，啟動項(xiàng)目只需要3秒，vue2的項(xiàng)目怎么也得十幾秒吧，熱更新也極快，開發(fā)體驗(yàn)好！
2. 另外一個是vue3的setup語法糖[5]，可以少寫很多沒有用的重復(fù)代碼，比如讓組件自動注冊，屬性及方法無需return等等，好用！節(jié)省心智！
3. Volar插件配合vscode保存代碼卡頓，不知道是配置問題還是做的優(yōu)化不太好，沒有之前vetur舒服，查閱資料發(fā)現(xiàn)很多人都有這問題，可能是保存代碼時和eslint有沖突。

H5階段

做完Vue3的項(xiàng)目后，也差不多小半年過年了，回來之后公司做了人員調(diào)整，我被調(diào)到公司自研App部門，開始做H5。相對來說我們公司H5的內(nèi)容就很核心了，而且因?yàn)閠oC,產(chǎn)品對于細(xì)節(jié)的要求更高，甚至有一個排期就是專門給技術(shù)去做優(yōu)化的。

webpack打包、熱更新優(yōu)化

剛接手H5的項(xiàng)目就遇到一個頭疼的問題，項(xiàng)目文件很大，每次編寫代碼保存，熱更新時間能有8、90秒，熱更新之后如果在手機(jī)上運(yùn)行，H5還需要進(jìn)行打包發(fā)版，也就是將打包的文件更新至cdn，打包發(fā)版更夸張，打包有時候能花費(fèi)十幾分鐘，再加上上傳cdn，更新一段代碼要等小20分鐘！

毋庸置疑，接手第一件事就是一通抄作業(yè)...不，是做webpack的優(yōu)化。

1. cache-loader, 在rules中給加載速度久的文件，如js文件加上cache-loader之后，可以讓打包速度有所提升，縮減到5分鐘，但還是不夠快，而且這個loader本身開啟也需要花費(fèi)時間。

2. 持久化緩存，繼續(xù)尋找 webpack打包緩存的問題，再一通抄作業(yè)后，發(fā)現(xiàn)加入持久化緩存的配置，能達(dá)到比較好的效果，打包明顯加快！ 如果不更改webpack配置，第二次打包只有10秒， 是10min變從10秒，就是這么強(qiáng)大！而且熱更新也會加快！配置貼出來，webpack中cache的type類型換成filesystem，并指定路徑即可。

   

3. 發(fā)版上傳優(yōu)化，也就是發(fā)布文件到cdn，這塊做了兩個優(yōu)化，一是靜態(tài)文件抽離，資源較大且更改頻率低的文件，如assets下的圖片，動畫等，單純拆出來寫腳本上傳，那么每次打包上傳只需要更新變化較多的js和css文件，二是開發(fā)環(huán)境更換國內(nèi)云服務(wù)器存儲桶（這個因“司”而異，因?yàn)槲覀児緲I(yè)務(wù)是海外），也可以加速上傳。

4. externals，將需要引用的比較大的第三方庫抽離，不要直接打進(jìn)包里，加快首屏加載速度，等到需要的時候再去請求。

算法狀態(tài)機(jī)

這是使用動畫時需要用到的一種解決方案，后端返回的動畫數(shù)據(jù)，前端會用它處理成多個幀，每一幀包含了一段動畫、語音和字幕，將這些幀按照順序播放，就變成了一個動畫。是從算法遷移過來的項(xiàng)目，邏輯會比較復(fù)雜，從名字也能看得出來。

Fetch流式輸出

使用fetch請求返回二進(jìn)制流的形式，通過TextDecoder解碼，逐漸push到展示的數(shù)組中，實(shí)現(xiàn)逐步渲染文本內(nèi)容，類似gpt實(shí)時渲染。

stripe第三方支付平臺

stripe是方便海外用戶的第三方支付平臺，類似于國內(nèi)的收錢吧這種？功能很強(qiáng)大，可以看看我的另一篇文章，使用Stripe做類似于gpt的支付跳轉(zhuǎn)[6]（checkout方式）。后面還會出一篇，自定義搭建stripe的完整流程（elements方式）。

微前端框架--qiankun[7]

有一個需求是，公司里的項(xiàng)目框架各不相同，有的是vue2，vue3，react，還有jquery，如果要在一個項(xiàng)目里把這些項(xiàng)目的功能都實(shí)現(xiàn)，重寫一遍代碼顯然效率太低，這個時候就需要一個解決方案，也就是微前端，能融合不同框架項(xiàng)目，通過路由的切換顯示，這里我們采用了qiankun，并且恰好我負(fù)責(zé)qiankun的基座搭建。這是qiankun官網(wǎng)[8]。我參閱了這兩篇文章，qiankun搭建[9], qiankun保姆級攻略[10]，以及一個很棒github的qiankun例子，github.com/fengxianqi/[11]

總結(jié)

到這就是我這一年的工作中遇到所有技術(shù)經(jīng)驗(yàn)啦！不知相比大廠的經(jīng)歷算是怎樣，了解的小伙伴可以評論下，分享出來也是期望我的經(jīng)歷能給大家?guī)硪恍﹩l(fā)，同時能知道自己的局限，歡迎多多指導(dǎo)和交流~

參考資料

https://www.tailwindcss.cn/: https://link.juejin.cn?target=https%3A%2F%2Fwww.tailwindcss.cn%2F

https://www.drone.io/: https://link.juejin.cn?target=https%3A%2F%2Fwww.drone.io%2F

https://blog.csdn.net/kiscon/article/details/126131492: https://link.juejin.cn?target=https%3A%2F%2Fblog.csdn.net%2Fkiscon%2Farticle%2Fdetails%2F126131492

https://juejin.cn/post/6844903881390964744: https://juejin.cn/post/6844903881390964744

https://juejin.cn/post/7078865301856583717: https://juejin.cn/post/7078865301856583717

https://juejin.cn/post/7241554408960786469: https://juejin.cn/post/7241554408960786469

https://qiankun.umijs.org/zh/guide: https://link.juejin.cn?target=https%3A%2F%2Fqiankun.umijs.org%2Fzh%2Fguide

https://link.juejin.cn/?target=https%3A%2F%2Fqiankun.umijs.org%2Fzh%2Fguide: https://link.juejin.cn/?target=https%3A%2F%2Fqiankun.umijs.org%2Fzh%2Fguide

https://juejin.cn/post/7114589692560932878: https://juejin.cn/post/7114589692560932878

https://juejin.cn/post/7226004363993661495: https://juejin.cn/post/7226004363993661495

https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Ffengxianqi%2Fqiankun-example: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Ffengxianqi%2Fqiankun-example

最后

如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我個小忙：

1. 點(diǎn)個「喜歡」或「在看」，讓更多的人也能看到這篇內(nèi)容

2. 我組建了個氛圍非常好的前端群，里面有很多前端小伙伴，歡迎加我微信「sherlocked_93」拉你加群，一起交流和學(xué)習(xí)

3. 關(guān)注公眾號「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時聊騷。