项目打包和优化-项目打包
目标：能够通过命令对项目进行打包
步骤：
在项目根目录打开终端，输入打包命令：npm run build
等待打包完成，打包后的内容被放在项目根下的 build 文件夹中
项目打包和优化-项目本地预览
目标：能够在本地预览打包后的项目
步骤：
全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务
在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器
在浏览器中访问：http://localhost:5000/ 预览项目
项目打包和优化-打包体积分析
目标：能够分析项目打包体积
分析说明：通过分析打包体积，才能知道项目中的哪部分内容体积过大，才能知道如何来优化
步骤：
安装分析打包体积的包：npm i source-map-explorer
在 package.json 中的 scripts 标签中，添加分析打包体积的命令
"scripts": { "analyze": "source-map-explorer 'build/static/js/*.js'", }
对项目打包：npm run build（如果已经打过包，可省略这一步）
运行分析命令：npm run analyze
通过浏览器打开的页面，分析图表中的包体积
核心代码：
项目打包和优化-生产环境优化
目标：能够根据是否为生产环境对redux中间件进行优化
核心代码：
store/index.js 中： let middlewares if (process.env.NODE_ENV === 'production') { // 生产环境，只启用 thunk 中间件 middlewares = applyMiddleware(thunk) } else { middlewares = composeWithDevTools(applyMiddleware(thunk)) }
项目打包和优化-路由懒加载
目标：能够对路由进行懒加载实现代码分隔
步骤：
在 App 组件中，导入 Suspense 组件
在 Router 内部，使用 Suspense 组件包裹组件内容
为 Suspense 组件提供 fallback 属性，指定 loading 占位内容
导入 lazy 函数，并修改为懒加载方式导入路由组件
import { lazy, Suspense } from 'react' // 导入页面组件 const Login = lazy(() => import('./pages/Login')) const Layout = lazy(() => import('./pages/Layout')) const App = () => { return ( <Router history={history}> <Suspense fallback={ <div style={{ textAlign: 'center', marginTop: 200 }} > loading... </div> } > <div className="app"> <Route exact path="/" render={() => <Redirect to="/home" />}></Route> <Route path="/login" component={Login}></Route> <AuthRoute path="/home" component={Layout}></AuthRoute> </div> </Suspense> </Router> ) } export default App
