如何在react项目中做公共配置文件
更新时间：2023年10月20日 09:22:33 作者：尼古拉斯二嘎
这篇文章主要介绍了如何在react项目中做公共配置文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
在react项目中做公共配置文件
在我们的react项目中有public文件夹，这个地方存放都是静态文件不会被编译，所以我们的静态公共配置文件就放在这里
公共配置文件放在这里有一个好处就是任何人可以实时修改配置文件，然后程序会根据你的修改运行对应的逻辑或者变量，
如：
我们的开发人员做了这个配置文件功能，我们就可以告诉其他非研发同事在这里配置所需内容，是不是很方便？
下面来看一下
1.在public中创建config.js
window.config = {
baseUrl: 'xxxxx',
mainTitle: 'xxxx',
imgUrl: 'xxxx',
...
}
2.在index.html中添加
注意这里的%PUBLIC_URL%是工程内置的写法，我们创建工程的时候在index.html可以看到很多这样的写法，意思就是路径取public文件
而且我建议大家使用script引入，这样每次刷新页面的时候能保证获取到我们修改config.js后的内容，如果使用import的话，会在编译的时候直接打包进去，导致打完包再修改配置文件就无效了
<script src = "%PUBLIC_URL%/config.js"></script>
3.在入口src -> index.js文件中
// 大家应该很熟悉，就是将功能配置文件的内容挂载到全局，这个跟vue的写法大同小异 React.Component.prototype.$config = window.config
4.在组件中使用，比如我们在公共配置文件中添加了图片地址，这样用：
process.env.PUBLIC_URL
let imgUrl = this.$config.imgUrl
<img src={`${process.env.PUBLIC_URL}/${imgUrl}`}></ img>
在上面我们看到了process.env，他是Nodejs提供的一个API，它返回一个包含用户环境信息的对象。
如果我们给Nodejs
设置一个环境变量，并把它挂载在 process.env 返回的对象上，便可以在代码中进行相应的环境判断
// 如我们有时会看到这样的代码，就是判断当前是生产还是开发环境来决定mode字段的定义
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
react项目优化配置
优化-配置CDN
通过 craco 来修改 webpack 配置，从而实现 CDN 优化
yarn add @craco/craco //或者 npm install @craco/craco --save
在项目 根目录新建craco.config.js文件
// 添加自定义对于webpack的配置
const path = require('path')
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定：使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src')
},
// 配置webpack
// 配置CDN
configure: (webpackConfig) => {
// webpackConfig自动注入的webpack配置对象
// 可以在这个函数中对它进行详细的自定义配置
// 只要最后return出去就行
let cdn = {
js: [],
css: []
}
// 只有生产环境才配置
whenProd(() => {
// key:需要不参与打包的具体的包
// value: cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下
// 通过import 导入的 react / react-dom
webpackConfig.externals = {
react: 'React',
'react-dom': 'ReactDOM'
}
// 配置现成的cdn 资源数组 现在是公共为了测试
// 实际开发的时候 用公司自己花钱买的cdn服务器
cdn = {
js: [
'https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js',
],
css: []
}
})
// 都是为了将来配置 htmlWebpackPlugin插件 将来在public/index.html注入
// cdn资源数组时 准备好的一些现成的资源
const { isFound, match } = getPlugin(
webpackConfig,
pluginByName('HtmlWebpackPlugin')
)
if (isFound) {
// 找到了HtmlWebpackPlugin的插件
match.userOptions.cdn = cdn
}
return webpackConfig
}
}
}public/index.html
<body>
<div id="root"></div>
<!-- 加载第三发包的 CDN 链接 -->
<% htmlWebpackPlugin.userOptions.cdn.js.forEach(cdnURL => { %>
<script src="<%= cdnURL %>"></script>
<% }) %>
</body>优化-路由懒加载
使用步骤
- 在 App 组件中，导入 Suspense 组件
- 在 路由Router 内部，使用 Suspense 组件包裹组件内容
- 为 Suspense 组件提供 fallback 属性，指定 loading 占位内容
- 导入 lazy 函数，并修改为懒加载方式导入路由组件
代码实现
App.js
import { Routes, Route } from 'react-router-dom'
import { HistoryRouter, history } from './utils/history'
import { AuthRoute } from './components/AuthRoute'
// 导入必要组件
import { lazy, Suspense } from 'react'
// 按需导入路由组件
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))
function App () {
return (
<HistoryRouter history={history}>
<Suspense
fallback={
<div
style={{
textAlign: 'center',
marginTop: 200
}}
>
loading...
</div>
}
>
<Routes>
{/* 需要鉴权的路由 */}
<Route path="/" element={
<AuthRoute>
<Layout />
</AuthRoute>
}>
{/* 二级路由默认页面 */}
<Route index element={<Home />} />
<Route path="article" element={<Article />} />
<Route path="publish" element={<Publish />} />
</Route>
{/* 不需要鉴权的路由 */}
<Route path='/login' element={<Login />} />
</Routes>
</Suspense>
</HistoryRouter>
)
}
export default App查看效果
我们可以在打包之后，通过切换路由，监控network面板资源的请求情况，验证是否分隔成功
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
React Hooks useReducer 逃避deps组件渲染次数增加陷阱
这篇文章主要介绍了React Hooks 之 useReducer 逃避deps后增加组件渲染次数的陷阱详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
欢迎来到今天的探险之旅！在这篇博客中,我们将深入了解 React 中神奇的虚拟DOM,并通过一个简单的例子来揭开其神秘面纱,文中通过代码示例也讲解非常详细,感兴趣的朋友可以参考下2024-01-01
这篇文章主要介绍了React触发render的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
react + vite + ts项目中优雅使用.svg文件
这篇文章主要为大家介绍了react + vite + ts项目中优雅使用.svg文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了react中实现修改input的defaultValue方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
聊聊ant design charts 获取后端接口数据展示问题
今天在做项目的时候遇到几个让我很头疼的问题，一个是通过后端接口成功访问并又返回数据，但拿不到数据值。其二是直接修改state中的data，console中数组发生变化但任然数据未显示，这篇文章主要介绍了ant design charts 获取后端接口数据展示,需要的朋友可以参考下2022-05-05
在大型Web应用中，一个常见的设计需求是让某些组件具有吸顶效果，这意味着当页面向下滚动时，该组件会保持在屏幕顶部，在本文中，我们将介绍如何在React项目中实现吸顶效果。我们将首先讨论使用原生JavaScript领域的方法来实现，然后将这些方法与React结合起来2023-06-06![详解react-webpack2-热模块替换[HMR]](//img.jbzj.com/images/xgimg/bcimg7.png)
这篇文章主要介绍了详解react-webpack2-热模块替换[HMR]， 小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
React系列useSyncExternalStore学习详解
这篇文章主要为大家介绍了React系列useSyncExternalStore的学习及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
react的渲染机制是非常独特的,有别于 Vue 框架的渲染次数的优化计算,React 很久以来就有PureComponent、shouldUpdate,本文小编给大家介绍了React渲染的优化方案,需要的朋友可以参考下2024-08-08
![详解react-webpack2-热模块替换[HMR]](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论