一.项目打包
1.打开项目终端，输入命令：yarn build
2.等待打包完成，打包生成的内容被放在根下的build文件夹中
二.项目本地预览
1全局安装本地服务包npm i -g serve 该包提供啦serve命令，用来启动本地服务
2.在项目根目录中执行命令serve -s ./build 在build目录中开启服务器
3.在浏览器中访问：http://localhost：3000/ 预览项目
三.打包体积分析
1.安装分析打包体积的包工具：yarn add source-map-explorer
2.在package.json中的scripts标签中，添加分析打包体积命令
3.对项目打包：yarn build （如果已打包，请忽略这一步）
4.运行分析命令：yarn analyze
5.通过浏览器打开的页面，分析图标中的包体积
核心代码。在package.json中
"scripts":{ "analyze":source-map-explorer 'build/static/js/*.js ', }
四.优化-配置CDN
1.通过craco来修改webpack配置，从而实现CDN优化
craco是不需要yarn eject命令解包，就可以配置react 的webpack第三方包管理工具
craco.config.js配置文件
const path = require('path') const { whenProd, getPlugin, pluginByName } = require('@craco/craco') module.exports = { // webpack配置 webpack: { //配置cdn configure: (webpackConfig) => { let cdn = { js: [], css: [] } //只有生产环境才配置 // whenProd(() => { webpackConfig.externals = { react: 'React', 'react-dom': 'ReactDOM' } cdn = { //配置现成的cdn，资源数组，现在是公共为了测试 //实际开发的时候，用公司自己花钱买的cdn服务器 js: [ 'https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js', 'https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/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.options.cdn.js.forEach(cdnURL=>{%>
<script src='<%=cdnURL %>'></script>
<%})%>
</body>
五.路由懒加载
1.在App组件中，导入Suspense组件
2.在路由Router内部，使用Suspense组件包裹组件的内容
3.为Suspense组件提供fallback属性，指定loading站位内容
4.导入lazy函数，并修改为懒加载方式导入路由组件
代码实现
// 导入路由懒加载 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')) // 然后用Suspense组件包裹整个路由 function App() { return ( <div className="App"> <BrowserRouter> {/* 路由懒加载过程中显示的loading */} <Suspense fallback={ <div style={{textAlign:'center',marginTop:200}} > loading...... </div> } > <Routes> {/* 这个是需要判断token是否存在 */} <Route path='/' element={<AuthComponent><Layout /></AuthComponent>}> {/* 二级路由不需要加/，path='article' */} <Route index element={<Home />}></Route> <Route path='article' element={<Article />}></Route> <Route path='publish' element={<Publish />}></Route> </Route> <Route path='/login' element={<Login />}></Route> </Routes> </Suspense> </BrowserRouter> </div> ); } export default App;
