前端项目中优化引入路径

社区管理员发布于2022-10-08 14:48 / 618人阅读

现象：在前端开发中，发现项目中很多路径引入都是相对路径，出现很多类似

import api from "../../../api/test" import * as api from "../../../api" 复制代码

这样会导致文件引用的时候，需要计算层级，拖慢开发速度，解决方法如下：

对于经常使用的目录，可以采用别名的方式解决

不管路径如何，只要在该目录下就从该目录读起，优化效果

一、对于typescrip项目

1、示例项目

一个简单的ts项目，目录结构为

├── 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 可以设置为. ./ 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参数，

"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配置设置别名, webpack关于alias配置

1、示例项目

该项目为一个react的js项目，我们通过customize-cra 来覆盖项目隐藏的webpack配置，项目结构为

├── 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 插件版本不同，会导致配置别名的方法不同，但殊途同归，找到封装的方法进行配置即可。

GPU云服务器云服务器服务器中的项目路径 web项目引入jquery 中引入的无人机路径优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127947.html

前端优化：RequireJS Optimizer 的使用和配置方法

摘要：是自带的前端优化工具，可以对项目中的和代码使用或者进行压缩合并。这篇文章介绍的使用和配置方法，帮助大家解决使用中碰到的问题。对脚本的优化支持目前流行的和两种压缩方式，需要环境支持，而则需要环境。定义要被优化的模块数组。 RequireJS Optimizer 是 RequireJS 自带的前端优化工具，可以对 RequireJS 项目中的JavaScript和CSS 代码使用 Ugli...

Alan 2019-08-28 17:51 评论0 收藏0
不简单的前端性能优化

摘要：本文主要介绍关键渲染路径与网络两个方面的性能优化并提供，篇幅较长建议电脑观看。百度统计代码注意，的脚本不会被阻塞，完成后立即执行，但是有可能会阻塞关键渲染路径。本文主要介绍关键渲染路径与网络两个方面的性能优化并提供demo，篇幅较长建议电脑观看。前端优化的方面太多，本文介绍的仅仅是其中的一部分，力求涵盖关键渲染路径的方方面面，及一些不常被提到的网络优化部分。测试环境如无特殊说明均...

RobinQu 2019-08-29 12:30 评论0 收藏0
不简单的前端性能优化

摘要：本文主要介绍关键渲染路径与网络两个方面的性能优化并提供，篇幅较长建议电脑观看。百度统计代码注意，的脚本不会被阻塞，完成后立即执行，但是有可能会阻塞关键渲染路径。本文主要介绍关键渲染路径与网络两个方面的性能优化并提供demo，篇幅较长建议电脑观看。前端优化的方面太多，本文介绍的仅仅是其中的一部分，力求涵盖关键渲染路径的方方面面，及一些不常被提到的网络优化部分。测试环境如无特殊说明均...

developerworks 2019-08-20 16:07 评论0 收藏0
不简单的前端性能优化

摘要：本文主要介绍关键渲染路径与网络两个方面的性能优化并提供，篇幅较长建议电脑观看。百度统计代码注意，的脚本不会被阻塞，完成后立即执行，但是有可能会阻塞关键渲染路径。本文主要介绍关键渲染路径与网络两个方面的性能优化并提供demo，篇幅较长建议电脑观看。前端优化的方面太多，本文介绍的仅仅是其中的一部分，力求涵盖关键渲染路径的方方面面，及一些不常被提到的网络优化部分。测试环境如无特殊说明均...

hedge_hog 2019-08-01 16:45 评论0 收藏0
【前端构建】RequireJS及其优化工具

摘要：介绍一款模块加载工具的入门，并且重点介绍其优化工具。发布目录项目源代码工具目录，例如构建工具等。另外，前端代码发布前都会进行压缩，使文件足够小。原来是因为里了，所以优化工具把也合并进来了。而优化工具要用好，要多尝试他们的配置选项。前端变化太快，如今RequireJS已经无法吸引眼球了。介绍一款模块加载工具：RequireJS的入门，并且重点介绍其优化工具。一、RequireJS简介...

Loong_T 2019-08-19 17:59 评论0 收藏0