亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端項(xiàng)目中優(yōu)化引入路徑

社區(qū)管理員 / 774人閱讀

現(xiàn)象：在前端開發(fā)中，發(fā)現(xiàn)項(xiàng)目中很多路徑引入都是相對(duì)路徑，出現(xiàn)很多類似

import api from "../../../api/test" import * as api from "../../../api" 復(fù)制代碼

這樣會(huì)導(dǎo)致文件引用的時(shí)候，需要計(jì)算層級(jí)，拖慢開發(fā)速度，解決方法如下：

對(duì)于經(jīng)常使用的目錄，可以采用別名的方式解決

不管路徑如何，只要在該目錄下就從該目錄讀起，優(yōu)化效果

一、對(duì)于typescrip項(xiàng)目

1、示例項(xiàng)目

一個(gè)簡(jiǎn)單的ts項(xiàng)目，目錄結(jié)構(gòu)為

├── package.json ├── prettier.config.js ├── public ├── README.md ├── src │   ├── App.css │   ├── App.test.tsx │   ├── App.tsx │   ├── assets │   │   └── css │   │       └── public.css │   ├── components │   │   └── UTable │   │       └── index.tsx │   ├── index.css │   ├── index.tsx │   ├── layout │   │   ├── content.tsx │   │   └── index.tsx │   ├── logo.svg │   ├── page │   │   ├── Demo1 │   │   │   └── index.tsx │   │   ├── Demo2 │   │   │   └── index.tsx │   │   ├── SignIn │   │   │   └── index.tsx │   │   └── SignUp │   │       └── index.tsx ├── tsconfig.json └── yarn.lock 復(fù)制代碼

2、配置

tsconfig.json文件中baseUrl 可以設(shè)置為.  ./ src任意一個(gè)

    "compilerOptions": {         baseUrl: "."       } 復(fù)制代碼

., ./ 意義相同，表示引用tsconfig.json路徑開始

3、使用

此時(shí)在app.tsx中引用Demo1文件如下

import Demo1 from "src/page/Demo1" 復(fù)制代碼

src 表示引用從 src目錄開始 此時(shí)在app.tsx中引用Demo1文件如下

import Demo1 from "page/Demo1" 復(fù)制代碼

4、注意

1、當(dāng)然，對(duì)于相對(duì)路徑依然適用

2、在compilerOptions中，我嘗試使用了paths參數(shù)，

"compilerOptions": {     baseUrl: ".",     paths: {         "@": ["./src"]     } } 復(fù)制代碼

但是可能由于版本問題，console報(bào)錯(cuò)

The following changes are being made to your tsconfig.json file:   - compilerOptions.paths must not be set (aliased imports are not supported) 復(fù)制代碼

二、對(duì)于javascript項(xiàng)目

通過webpack配置設(shè)置別名, webpack關(guān)于alias配置

1、示例項(xiàng)目

該項(xiàng)目為一個(gè)react的js項(xiàng)目，我們通過customize-cra 來覆蓋項(xiàng)目隱藏的webpack配置，項(xiàng)目結(jié)構(gòu)為

├── config-overrides.js ├── package.json ├── public ├── README.md ├── src │   ├── App.css │   ├── App.js │   ├── App.test.js │   ├── components │   │   └── Demo1 │   │       └── index.js │   │   └── Demo2 │   │       └── index.js │   ├── index.css │   ├── index.js │   ├── logo.svg │   ├── page │   ├── reportWebVitals.js │   └── setupTests.js └── yarn.lock 復(fù)制代碼

2、配置

其中config-overrides.js為覆蓋原有webpack的文件

cat config-overrides.js

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra'); const path = require('path'); module.exports = override(   fixBabelImports('import', {     libraryName: 'antd-mobile',     style: 'css',   }),   addWebpackAlias({         '@': path.resolve('./src/components'),         'src': path.resolve('./src')   }) ); 復(fù)制代碼

3、使用

cat app.js

import Demo1 from 'components/Demo1' import Demo2 from 'src/components/Demo2' import './App.css'; function App() {   return (     <div className="App">       <Demo1 />       <Demo2 />     </div>   ); } export default App; 復(fù)制代碼

直接在項(xiàng)目中，從components目錄或src目錄引用即可

4、特別說明

1、別名沖突

我們知道在引入css文件的時(shí)候，我們通常會(huì)這樣

@import "app/index.css" 復(fù)制代碼

如果我們別名使用了@ 等特殊字符，那么低版本的cssloader可能會(huì)解析失敗，此時(shí)需要在cssloader中配置別名，或者使用 ~ 引入

@import "~app/index.css" 復(fù)制代碼

2、版本問題

各個(gè)項(xiàng)目使用的js  node  插件版本不同，會(huì)導(dǎo)致配置別名的方法不同，但殊途同歸，找到封裝的方法進(jìn)行配置即可。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/127947.html

相關(guān)文章

  • 前端優(yōu)化：RequireJS Optimizer 的使用和配置方法

    摘要：是自帶的前端優(yōu)化工具，可以對(duì)項(xiàng)目中的和代碼使用或者進(jìn)行壓縮合并。這篇文章介紹的使用和配置方法，幫助大家解決使用中碰到的問題。對(duì)腳本的優(yōu)化支持目前流行的和兩種壓縮方式，需要環(huán)境支持，而則需要環(huán)境。定義要被優(yōu)化的模塊數(shù)組。 RequireJS Optimizer 是 RequireJS 自帶的前端優(yōu)化工具，可以對(duì) RequireJS 項(xiàng)目中的JavaScript和CSS 代碼使用?Ugli...

    Alan 評(píng)論0 收藏0

  • 不簡(jiǎn)單的前端性能優(yōu)化

    摘要：本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個(gè)方面的性能優(yōu)化并提供，篇幅較長建議電腦觀看。百度統(tǒng)計(jì)代碼注意，的腳本不會(huì)被阻塞，完成后立即執(zhí)行，但是有可能會(huì)阻塞關(guān)鍵渲染路徑。 本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個(gè)方面的性能優(yōu)化并提供demo，篇幅較長建議電腦觀看。 前端優(yōu)化的方面太多，本文介紹的僅僅是其中的一部分，力求涵蓋關(guān)鍵渲染路徑的方方面面，及一些不常被提到的網(wǎng)絡(luò)優(yōu)化部分。 測(cè)試環(huán)境如無特殊說明均...

    RobinQu 評(píng)論0 收藏0

  • 不簡(jiǎn)單的前端性能優(yōu)化

    摘要：本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個(gè)方面的性能優(yōu)化并提供，篇幅較長建議電腦觀看。百度統(tǒng)計(jì)代碼注意，的腳本不會(huì)被阻塞，完成后立即執(zhí)行，但是有可能會(huì)阻塞關(guān)鍵渲染路徑。 本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個(gè)方面的性能優(yōu)化并提供demo，篇幅較長建議電腦觀看。 前端優(yōu)化的方面太多，本文介紹的僅僅是其中的一部分，力求涵蓋關(guān)鍵渲染路徑的方方面面，及一些不常被提到的網(wǎng)絡(luò)優(yōu)化部分。 測(cè)試環(huán)境如無特殊說明均...

    developerworks 評(píng)論0 收藏0

  • 不簡(jiǎn)單的前端性能優(yōu)化

    摘要：本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個(gè)方面的性能優(yōu)化并提供，篇幅較長建議電腦觀看。百度統(tǒng)計(jì)代碼注意，的腳本不會(huì)被阻塞，完成后立即執(zhí)行，但是有可能會(huì)阻塞關(guān)鍵渲染路徑。 本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個(gè)方面的性能優(yōu)化并提供demo，篇幅較長建議電腦觀看。 前端優(yōu)化的方面太多，本文介紹的僅僅是其中的一部分，力求涵蓋關(guān)鍵渲染路徑的方方面面，及一些不常被提到的網(wǎng)絡(luò)優(yōu)化部分。 測(cè)試環(huán)境如無特殊說明均...

    hedge_hog 評(píng)論0 收藏0

  • 【前端構(gòu)建】RequireJS及其優(yōu)化工具

    摘要：介紹一款模塊加載工具的入門，并且重點(diǎn)介紹其優(yōu)化工具。發(fā)布目錄項(xiàng)目源代碼工具目錄，例如構(gòu)建工具等。另外，前端代碼發(fā)布前都會(huì)進(jìn)行壓縮，使文件足夠小。原來是因?yàn)槔锪耍詢?yōu)化工具把也合并進(jìn)來了。而優(yōu)化工具要用好，要多嘗試他們的配置選項(xiàng)。 前端變化太快，如今RequireJS已經(jīng)無法吸引眼球了。介紹一款模塊加載工具：RequireJS的入門，并且重點(diǎn)介紹其優(yōu)化工具。 一、RequireJS簡(jiǎn)介...

    Loong_T 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<