Make public configuration files in react project
There is a public folder in our react project. This place stores static files and will not be compiled, so our static public configuration file is placed here
One advantage of putting public configuration files here is that anyone can modify the configuration files in real time, and the program will run the corresponding logic or variables according to your modifications.
like:
Our developers have made this configuration file function, and we can tell other non-development colleagues to configure the required content here. Isn’t it very convenient?
Let's take a look below
1. Create in public
= {
baseUrl: 'xxxxx',
mainTitle: 'xxxx',
imgUrl: 'xxxx',
...
}
2. Add in
Note that %PUBLIC_URL% here is a built-in writing method for the project. When we create the project, we can see a lot of such writing methods, which means taking the path to the public file.
And I suggest you use script to introduce it, so that we can ensure that we get the modified content every time the page is refreshed. If you use import, it will be packaged directly during compilation, resulting in invalid changes to the configuration file after the package is completed.
<script src = "%PUBLIC_URL%/"></script>
3. In the entry src -> file
// Everyone should be familiar with it, which is to mount the content of the function configuration file to the global level. This is similar to the writing method of vue.$config =
4. Use it in components, for example, we added image addresses to the public configuration file, so use:
.PUBLIC_URL
let imgUrl = this.$
<img src={`${.PUBLIC_URL}/${imgUrl}`}></ img>
As we see above, it is an API provided by Nodejs, which returns an object containing user environment information.
If we give Nodejs
Set an environment variable and mount it on the returned object, so you can make corresponding environment judgments in the code
// If we sometimes see such code, we are judging whether it is currently a production or development environment to determine the definition of the mode field. = {
mode: .NODE_ENV === 'production' ? 'production' : 'development'
}
React project optimization configuration
Optimization - Configure CDN
Modify webpack configuration through craco to achieve CDN optimization
yarn add @craco/craco //or npm install @craco/craco --save
Create a new file in the project root directory
// Add custom configuration for webpack
const path = require('path')
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
= {
// webpack configuration webpack: {
// Configure alias alias: {
// Contract: Use @ to represent the path where the src file is located '@': (__dirname, 'src')
},
// Configure webpack // Configure CDN configure: (webpackConfig) => {
// webpack configuration object automatically injected by webpackConfig // You can make detailed custom configuration in this function // Just return it in the end let cdn = {
js: [],
css: []
}
// Only the production environment is configured whenProd(() => {
// key: specific packages that need not participate in packaging // value: The name of the variable mounted globally in the cdn file. In order to replace the previous development environment, in the development environment // react/react-dom imported through import = {
react: 'React',
'react-dom': 'ReactDOM'
}
// Configure the ready-made cdn resource array now public for testing // In actual development, use the CDN server that the company paid for by itself cdn = {
js: [
'/ajax/libs/react/18.1.0/umd/',
'/ajax/libs/react-dom/18.1.0/umd/',
],
css: []
}
})
// All are for the purpose of configuring the htmlWebpackPlugin plugin in the future. Inject it in public/ // Some ready-made resources are available when cdn resource array const { isFound, match } = getPlugin(
webpackConfig,
pluginByName('HtmlWebpackPlugin')
)
if (isFound) {
// Found the plugin for HtmlWebpackPlugin = cdn
}
return webpackConfig
}
}
}public/
<body>
<div ></div>
<!-- Loading the third package CDN Link -->
<% (cdnURL => { %>
<script src="<%= cdnURL %>"></script>
<% }) %>
</body>Optimization - Lazy Loading of Routing
Steps to use
- In the App component, import the Suspense component
- Inside the routing Router, use the Suspense component to wrap the component contents
- Provides fallback attribute for Suspense component, specifying loading placeholder content
- Import lazy functions and modify them to lazy loading method to import routing components
Code implementation
import { Routes, Route } from 'react-router-dom'
import { HistoryRouter, history } from './utils/history'
import { AuthRoute } from './components/AuthRoute'
// Import necessary componentsimport { lazy, Suspense } from 'react'
// Import routing components on demandconst 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>
{/* Routes that require authentication */}
<Route path="/" element={
<AuthRoute>
<Layout />
</AuthRoute>
}>
{/* Default page for secondary routing */}
<Route index element={<Home />} />
<Route path="article" element={<Article />} />
<Route path="publish" element={<Publish />} />
</Route>
{/* Routes that do not require authentication */}
<Route path='/login' element={<Login />} />
</Routes>
</Suspense>
</HistoryRouter>
)
}
export default AppView the effect
After packaging, we can monitor the request status of network panel resources by switching routes and verify whether the separation is successful
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.