国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

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

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

import api from "../../../api/test" import * as api from "../../../api" 復制代碼

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

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

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

一、對于typescrip項目

1、示例項目

一個簡單的ts項目，目錄結(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 復制代碼

2、配置

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

    "compilerOptions": {         baseUrl: "."       } 復制代碼

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

3、使用

此時在app.tsx中引用Demo1文件如下

import Demo1 from "src/page/Demo1" 復制代碼

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

import Demo1 from "page/Demo1" 復制代碼

4、注意

1、當然，對于相對路徑依然適用

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

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

但是可能由于版本問題，console報錯

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

二、對于javascript項目

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

1、示例項目

該項目為一個react的js項目，我們通過customize-cra 來覆蓋項目隱藏的webpack配置，項目結(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 復制代碼

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')   }) ); 復制代碼

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; 復制代碼

直接在項目中，從components目錄或src目錄引用即可

4、特別說明

1、別名沖突

我們知道在引入css文件的時候，我們通常會這樣

@import "app/index.css" 復制代碼

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

@import "~app/index.css" 復制代碼

2、版本問題

各個項目使用的js  node  插件版本不同，會導致配置別名的方法不同，但殊途同歸，找到封裝的方法進行配置即可。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/127947.html

相關(guān)文章

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

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

    Alan 評論0 收藏0

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

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

    RobinQu 評論0 收藏0

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

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

    developerworks 評論0 收藏0

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

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

    hedge_hog 評論0 收藏0

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

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

    Loong_T 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<