一.项目打包
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;