国产精品日本在线,亚洲综合香蕉婷婷蜜桃

我的博客地址

文章目錄

前言

該篇博客將會(huì)介紹如何增強(qiáng)開(kāi)發(fā)體驗(yàn)，內(nèi)容如下:

導(dǎo)入路徑優(yōu)化
開(kāi)啟sourcemap
構(gòu)建加速和構(gòu)建緩存

導(dǎo)入路徑優(yōu)化

這一步的主要目的是在導(dǎo)入文件時(shí)候可以使用簡(jiǎn)寫(xiě)的路徑，比如下面的導(dǎo)入路徑對(duì)比:

// 未優(yōu)化
import { xxx } from '../../../../views/Test/index.tsx'
// 優(yōu)化后
import { xxx } from '@views/Test'

為了測(cè)試這一效果，我們首先在src文件夾中新建containers文件夾，然后再在里面新建views和shared文件夾，views主要用來(lái)存放業(yè)務(wù)相關(guān)的頁(yè)面，而shared則是用于存放和業(yè)務(wù)有關(guān)的共用組件(注意這個(gè)shared和components是不一樣的，component應(yīng)該是和業(yè)務(wù)抽離的組件，并且在切換業(yè)務(wù)后也可以進(jìn)行復(fù)用的組件，這樣做有一個(gè)好處就是如果公司需要構(gòu)建中臺(tái)業(yè)務(wù)的時(shí)候可以直接將components里面的組件拿出來(lái)用)
之后我們?cè)?code>views和shared里面各新建一個(gè)組件

image.png
然后在index.tsx中引入他們并使用

image.png

效果

image.png
但是此時(shí)在引用的路徑上存在一個(gè)錯(cuò)誤，說(shuō)是不能以.tsx文件結(jié)尾

image.png

但是當(dāng)我們?nèi)サ?code>.tsx的時(shí)候，又會(huì)發(fā)現(xiàn)文件無(wú)法引入了

image.png

原因是，webpack不知道你引入的這個(gè)index文件是什么類(lèi)型的文件，當(dāng)然這個(gè)問(wèn)題解決起來(lái)也很簡(jiǎn)單，我們?nèi)サ?code>webpack.config.js文件中，添加resolve配置:

image.png

extension配置的意思是，當(dāng)我導(dǎo)入文件時(shí)候如果沒(méi)有標(biāo)注文件后綴，那么就默認(rèn)導(dǎo)入這幾種類(lèi)型的文件。
之后我們回到入口index.tsx中，將引入路徑改成如下也可以正常運(yùn)行:

image.png

image.png
之后我們發(fā)現(xiàn)在這兩個(gè)組件的引入位置中，都存在./containers，那么如何省略這一塊呢？也就是如何簡(jiǎn)寫(xiě)這一塊的路徑呢?

image.png

我們可以通過(guò)webpack的路徑別名來(lái)做這件事。
首先我們應(yīng)該去webpack.config.js中，同樣在resolve中配置alias屬性，將路徑別名及其對(duì)應(yīng)的路徑放進(jìn)去:

image.png

然后在入口index.tsx中將引入路徑改成別名:

image.png

這時(shí)候項(xiàng)目雖然可以跑成功，但是因?yàn)門(mén)ypeScript無(wú)法根據(jù)這個(gè)路徑找到模塊，所以報(bào)了錯(cuò):

image.png

我們?nèi)サ?code>tsconfig.json中進(jìn)行配置，添加如下屬性，目的就是告訴TypeScript路徑別名指向的模塊:

image.png

回到index.tsx會(huì)發(fā)現(xiàn)已經(jīng)不報(bào)錯(cuò)了

image.png

注意: 如果以后還需要添加路徑別名，記得webpack.config.js和tsconfig.json都需要進(jìn)行配置，下面是我的博客中的路徑別名配置:

image.png

開(kāi)啟sourcemap

什么是sourcemap
sourcemap是就是資源信息圖，它記載了引入模塊的內(nèi)容、名字等信息。
由于在現(xiàn)代前端開(kāi)發(fā)中，使用的React，Vue等模塊都屬于DSl(領(lǐng)域自定語(yǔ)言)，需要webpack配合一些loader去轉(zhuǎn)換成js代碼，而這些js代碼經(jīng)過(guò)轉(zhuǎn)化后很難進(jìn)行定位，特別是在壓縮變成一行代碼后就更加無(wú)法辨認(rèn)了，
比如我們?cè)?code>containers/views/ViewTest組件中跑一個(gè)錯(cuò)誤出來(lái)：

image.png

然后在網(wǎng)頁(yè)中點(diǎn)開(kāi)來(lái)看，發(fā)現(xiàn)代碼是這樣的，這種還是沒(méi)有經(jīng)過(guò)壓縮的簡(jiǎn)單組件:

image.png

那么出錯(cuò)的話如何更好的定位呢?答案是使用webpack的sourcemap功能。
開(kāi)啟sourcemap
要開(kāi)啟sourcemap非常簡(jiǎn)單，只需要在webpack的devtool屬性中填寫(xiě)你需要的sourcemap類(lèi)型即可:

image.png

這時(shí)候我們?cè)冱c(diǎn)回之前的錯(cuò)誤信息中可以發(fā)現(xiàn)，錯(cuò)誤定位變得非常簡(jiǎn)單了:

image.png
sourcemap分為很多個(gè)類(lèi)型，下面附上sourcemap類(lèi)型圖，可以自行選取適合的類(lèi)型

image.png

構(gòu)建加速和構(gòu)建緩存

什么是構(gòu)建緩存
我們一般會(huì)使用webpack-dev-server來(lái)進(jìn)行項(xiàng)目開(kāi)發(fā)，當(dāng)我們運(yùn)行webpack-dev-server的時(shí)候它會(huì)在內(nèi)存中進(jìn)行項(xiàng)目的構(gòu)建，但是當(dāng)使用了babel之類(lèi)的代碼轉(zhuǎn)換工具后，會(huì)對(duì)項(xiàng)目構(gòu)建產(chǎn)生較大的性能影響，這是因?yàn)槊恳淮蔚臉?gòu)建都會(huì)對(duì)代碼進(jìn)行重新轉(zhuǎn)換。
而構(gòu)建緩存就是將構(gòu)建的公用代碼緩存在磁盤(pán)上，這樣做的效果就是第一次構(gòu)建的時(shí)間花銷(xiāo)會(huì)比不用緩存的構(gòu)建大，但是在之后每次構(gòu)建的時(shí)間花銷(xiāo)都會(huì)大大減少。
對(duì)比
我們拿一個(gè)較大的項(xiàng)目來(lái)看區(qū)別。
注: 左邊是沒(méi)有設(shè)置構(gòu)建緩存，右邊進(jìn)行了構(gòu)建緩存。
首先進(jìn)行對(duì)比的是第一次構(gòu)建時(shí)候的時(shí)間花銷(xiāo):

image.png

然后是第二次構(gòu)建的時(shí)間花銷(xiāo):

image.png

可以看出在第二次構(gòu)建的時(shí)候時(shí)間花銷(xiāo)減少了百分之五十以上。
設(shè)置構(gòu)建緩存和構(gòu)建加速
在設(shè)置構(gòu)建緩存之前我們首先要考慮的是那些地方需要進(jìn)行設(shè)置，不出意外的話就是babel-loader，然后就是css-loader，因?yàn)檫@兩類(lèi)文件最多:

安裝對(duì)應(yīng)工具
在本項(xiàng)目中，我們使用的是cache-loader來(lái)做緩存，thread-loader來(lái)做構(gòu)建加速
npm i -D cache-loader thread-loader
配置
首先我們?cè)?code>build文件夾下新建loaders.js文件，然后在里面填寫(xiě)配置，如下圖:

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ù)沒(méi))，
第二個(gè)坑是在less-loader不要使用thread-loader，否則報(bào)錯(cuò)。

image.png
效果
這時(shí)候我們重跑項(xiàng)目會(huì)發(fā)現(xiàn)新建了一個(gè).cache-loader目錄，這就表示成功配置完成:

image.png

另外，記得在根目錄新建.gitignore文件，不要把緩存目錄也上傳到github上了

image.png