我的博客地址
文章目錄
- 項(xiàng)目及其技術(shù)棧介紹
- 前端: 項(xiàng)目初始化
- 前端: 使用Sass和Antd
- 前端: 開發(fā)體驗(yàn)優(yōu)化
- 前端: 搭建路由和狀態(tài)管理
- 前端: 支持Axios
- 前端: 打包與環(huán)境變量設(shè)置
- 前端: 團(tuán)隊(duì)代碼規(guī)范
- 后端: 項(xiàng)目初始化和使用Koa相關(guān)
- 后端: 使用TypeORM和MySQL
- 部署: 使用nginx部署前端項(xiàng)目
- 部署: 后端部署
- 部署: 使用jenkins自動化部署
前言
該篇博客將會介紹如何增強(qiáng)開發(fā)體驗(yàn)溜腐，內(nèi)容如下:
- 導(dǎo)入路徑優(yōu)化
- 開啟sourcemap
- 構(gòu)建加速和構(gòu)建緩存
導(dǎo)入路徑優(yōu)化
這一步的主要目的是在導(dǎo)入文件時(shí)候可以使用簡寫的路徑，比如下面的導(dǎo)入路徑對比:
// 未優(yōu)化
import { xxx } from '../../../../views/Test/index.tsx'
// 優(yōu)化后
import { xxx } from '@views/Test'
為了測試這一效果惦银，我們首先在
src文件夾中新建containers文件夾深胳，然后再在里面新建views和shared文件夾氮墨，views主要用來存放業(yè)務(wù)相關(guān)的頁面埃儿，而shared則是用于存放和業(yè)務(wù)有關(guān)的共用組件(注意這個(gè)shared和components是不一樣的漩仙，component應(yīng)該是和業(yè)務(wù)抽離的組件扰她，并且在切換業(yè)務(wù)后也可以進(jìn)行復(fù)用的組件踊兜，這樣做有一個(gè)好處就是如果公司需要構(gòu)建中臺業(yè)務(wù)的時(shí)候可以直接將components里面的組件拿出來用)-
之后我們在
views和shared里面各新建一個(gè)組件
image.png -
然后在
index.tsx中引入他們并使用
image.png
效果
image.png -
但是此時(shí)在引用的路徑上存在一個(gè)錯(cuò)誤竿滨，說是不能以
.tsx文件結(jié)尾
image.png
但是當(dāng)我們?nèi)サ?code>.tsx的時(shí)候，又會發(fā)現(xiàn)文件無法引入了
image.png
原因是捏境，webpack不知道你引入的這個(gè)index文件是什么類型的文件于游，當(dāng)然這個(gè)問題解決起來也很簡單，我們?nèi)サ?code>webpack.config.js文件中垫言，添加resolve配置:
image.png
extension配置的意思是贰剥，當(dāng)我導(dǎo)入文件時(shí)候如果沒有標(biāo)注文件后綴，那么就默認(rèn)導(dǎo)入這幾種類型的文件筷频。
之后我們回到入口index.tsx中蚌成，將引入路徑改成如下也可以正常運(yùn)行:
image.png
image.png -
之后我們發(fā)現(xiàn)在這兩個(gè)組件的引入位置中，都存在
./containers凛捏，那么如何省略這一塊呢担忧？也就是如何簡寫這一塊的路徑呢?
image.png
我們可以通過webpack的路徑別名來做這件事。
首先我們應(yīng)該去webpack.config.js中坯癣，同樣在resolve中配置alias屬性瓶盛，將路徑別名及其對應(yīng)的路徑放進(jìn)去:
image.png
然后在入口index.tsx中將引入路徑改成別名:
image.png
這時(shí)候項(xiàng)目雖然可以跑成功，但是因?yàn)門ypeScript無法根據(jù)這個(gè)路徑找到模塊示罗，所以報(bào)了錯(cuò):
image.png
我們?nèi)サ?code>tsconfig.json中進(jìn)行配置惩猫，添加如下屬性，目的就是告訴TypeScript路徑別名指向的模塊:
image.png
回到index.tsx會發(fā)現(xiàn)已經(jīng)不報(bào)錯(cuò)了
image.png
注意: 如果以后還需要添加路徑別名蚜点，記得webpack.config.js和tsconfig.json都需要進(jìn)行配置轧房，下面是我的博客中的路徑別名配置:
開啟sourcemap
-
什么是sourcemap
sourcemap是就是資源信息圖，它記載了引入模塊的內(nèi)容绍绘、名字等信息奶镶。
由于在現(xiàn)代前端開發(fā)中，使用的React脯倒，Vue等模塊都屬于DSl(領(lǐng)域自定語言)实辑，需要webpack配合一些loader去轉(zhuǎn)換成js代碼，而這些js代碼經(jīng)過轉(zhuǎn)化后很難進(jìn)行定位藻丢，特別是在壓縮變成一行代碼后就更加無法辨認(rèn)了，
比如我們在containers/views/ViewTest組件中跑一個(gè)錯(cuò)誤出來：
image.png
然后在網(wǎng)頁中點(diǎn)開來看摄乒，發(fā)現(xiàn)代碼是這樣的悠反，這種還是沒有經(jīng)過壓縮的簡單組件:
image.png
那么出錯(cuò)的話如何更好的定位呢?答案是使用webpack的sourcemap功能残黑。 -
開啟sourcemap
要開啟sourcemap非常簡單，只需要在webpack的devtool屬性中填寫你需要的sourcemap類型即可:
image.png
這時(shí)候我們再點(diǎn)回之前的錯(cuò)誤信息中可以發(fā)現(xiàn)斋否，錯(cuò)誤定位變得非常簡單了:
image.png -
sourcemap分為很多個(gè)類型梨水，下面附上sourcemap類型圖，可以自行選取適合的類型
image.png
構(gòu)建加速和構(gòu)建緩存
什么是構(gòu)建緩存
我們一般會使用webpack-dev-server來進(jìn)行項(xiàng)目開發(fā)茵臭，當(dāng)我們運(yùn)行webpack-dev-server的時(shí)候它會在內(nèi)存中進(jìn)行項(xiàng)目的構(gòu)建疫诽，但是當(dāng)使用了babel之類的代碼轉(zhuǎn)換工具后，會對項(xiàng)目構(gòu)建產(chǎn)生較大的性能影響旦委，這是因?yàn)槊恳淮蔚臉?gòu)建都會對代碼進(jìn)行重新轉(zhuǎn)換奇徒。
而構(gòu)建緩存就是將構(gòu)建的公用代碼緩存在磁盤上，這樣做的效果就是第一次構(gòu)建的時(shí)間花銷會比不用緩存的構(gòu)建大缨硝，但是在之后每次構(gòu)建的時(shí)間花銷都會大大減少摩钙。-
對比
我們拿一個(gè)較大的項(xiàng)目來看區(qū)別。
注: 左邊是沒有設(shè)置構(gòu)建緩存查辩，右邊進(jìn)行了構(gòu)建緩存胖笛。
首先進(jìn)行對比的是第一次構(gòu)建時(shí)候的時(shí)間花銷:
image.png
然后是第二次構(gòu)建的時(shí)間花銷:
image.png
可以看出在第二次構(gòu)建的時(shí)候時(shí)間花銷減少了百分之五十以上。 設(shè)置構(gòu)建緩存和構(gòu)建加速
在設(shè)置構(gòu)建緩存之前我們首先要考慮的是那些地方需要進(jìn)行設(shè)置宜岛，不出意外的話就是babel-loader长踊，然后就是css-loader，因?yàn)檫@兩類文件最多:
安裝對應(yīng)工具
在本項(xiàng)目中萍倡，我們使用的是cache-loader來做緩存身弊，thread-loader來做構(gòu)建加速
npm i -D cache-loader thread-loader-
配置
首先我們在build文件夾下新建loaders.js文件，然后在里面填寫配置遣铝，如下圖:
image.png
然后我們到build/rules/jsRules.js中加上配置:
image.png
再到build/rules/styleRules.js中加入配置:
注意這個(gè)地方有兩個(gè)坑:
第一個(gè)是node-sass中自帶multiple thread功能佑刷，所以threadLoader的線程必須設(shè)置為2，否則線程阻塞(不知道現(xiàn)在這個(gè)Bug修復(fù)沒)酿炸，
第二個(gè)坑是在less-loader不要使用thread-loader瘫絮，否則報(bào)錯(cuò)。
image.png -
效果
這時(shí)候我們重跑項(xiàng)目會發(fā)現(xiàn)新建了一個(gè).cache-loader目錄填硕，這就表示成功配置完成:
image.png
另外麦萤，記得在根目錄新建.gitignore文件，不要把緩存目錄也上傳到github上了
image.png
