[TOC]

01-项目打包

目标：能够通过命令对项目进行打包
步骤：

  1. 在项目根目录打开终端，输入打包命令：yarn build

  2. 等待打包完成，打包后的内容被放在项目根下的 build 文件夹中

    02-项目本地预览

    目标：能够在本地预览打包后的项目
    步骤：

  3. 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务

  4. 在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器
  5. 在浏览器中访问：http://localhost:5000/ 预览项目
  • 或者可以直接通过 npx serve -s ./build 来直接使用，省略全局安装的过程

    03-打包体积分析

    目标：能够分析项目打包体积
    分析说明：通过分析打包体积，才能知道项目中的哪部分内容体积过大，才能知道如何来优化
    步骤：
  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’”
}

04-路由懒加载

目标：能够对路由进行懒加载实现代码分割
分析说明：
React 中提供了 React.lazy() 来动态加载组件，可以实现：延迟加载在初次渲染时未用到的组件
注意：

  1. React.lazy() 需要配合 React.Suspense 组件来使用
  2. React.lazy 目前只支持默认导出（default exports），参考文档

React.Suspense 组件：指定加载中的提示，在动态加载的组件未加载完成前展示加载中效果
import { lazy, Suspense } from ‘react’

const Home = lazy(() => import(‘./Home’))


// 懒加载的组件，需要被 Supspense 包裹


步骤：

  1. 在 App 组件中，导入 Suspense 组件
  2. 在 Router 内部，使用 Suspense 组件包裹组件内容
  3. 为 Suspense 组件提供 fallback 属性，指定 loading 占位内容
  4. 导入 lazy 函数，并修改为懒加载方式导入路由组件

核心代码：
App.js 中：
import { lazy, Suspense } from ‘react’

// 导入页面组件
const Login = lazy(() => import(‘./pages/Login’))
const Layout = lazy(() => import(‘./pages/Layout’))

const App = () => {
return (

loading…}>







)
}
pages/Layout/index.js 中：
// 使用 lazy 导入组件
const Home = lazy(() => import(‘../Home’))
const Article = lazy(() => import(‘../Article’))
const Publish = lazy(() => import(‘../Publish’))

// …
App.scss 中：
.loading {
margin-top: 200px;
text-align: center;
}

05-配置CDN

目标：能够对第三方包使用CDN优化
分析说明：
通过 craco 来修改 webpack 配置，从而实现 CDN 优化
参考文档1：html-webpack-plugin-页面模板参考文档2：ejs 模板语法参考文档3：craco 配置参考文档4：html-webpack-plugin-自定义模板内容
如何查找 CDN 链接地址？

  1. https://www.bootcdn.cn/ 国内，目前收录了 4060 个前端开源项目
  2. https://unpkg.com/ 任何一个 npm 可以安装的包，在这里面都可以找到对应的 CDN 地址

核心代码：
craco.config.js 中：
const { whenProd, getPlugin, pluginByName } = require(‘@craco/craco’)
configure: webpackConfig => {
// 修改webpack配置
whenProd(() => {
webpackConfig.externals = {
‘react’: ‘React’,
‘react-dom’: ‘ReactDOM’,
‘redux’: ‘Redux’,
}
const { isFound, match } = getPlugin(webpackConfig, pluginByName(‘HtmlWebpackPlugin’))
if (isFound) {
match.userOptions.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‘,
‘https://cdn.bootcdn.net/ajax/libs/redux/4.1.0/redux.min.js‘
]
}
}
})

return webpackConfig;
}
}
public/index.html 中：



<% htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js.forEach(cdnURL => { %>

<% }) %>

06-使用dayjs优化antd

目标：能够使用 dayjs 替换 moment 来减少打包体积
内容：
参考 antd 替换 Moment.js
步骤：

  1. 安装包：yarn add antd-dayjs-webpack-plugin

craco.config.js 中：
const AntdDayjsWebpackPlugin = require(‘antd-dayjs-webpack-plugin’)

module.exports = {
webpack: {
// …

plugins: {
add: [new AntdDayjsWebpackPlugin()]
},
}
}

07-生产环境优化

目标：能够根据是否为生产环境对redux中间件进行优化
核心代码：
store/index.js 中：
// import { composeWithDevTools } from ‘redux-devtools-extension’

let middlewares

if (process.env.NODE_ENV === ‘production’) {
// 生产环境，只启用 thunk 中间件
middlewares = applyMiddleware(thunk)
} else {
// 开发环境
const { composeWithDevTools } = require(‘redux-devtools-extension’)
middlewares = composeWithDevTools(applyMiddleware(thunk))
}

08-自定义环境变量

目标：能够通过自定义环境变量配置接口地址
内容：
参考文档
常用的环境有两个：

  1. 开发环境：项目开发期间的环境，一般使用 .env.development 文件来创建自定义环境变量
  2. 生产环境：项目打包上线的环境，一般使用 .env.production 文件来创建自定义环境变量

在运行 yarn start 时，CRA 会自动读取 .env.development 中的环境变量；在运行 yarn build 时，会自动读取 .env.production 中的环境变量
React CRA 中约定，所有自定义环境变量名称必须以：REACTAPP 开头
# .env.development`
REACT_APP_URL=http://geek.itheima.net/v1_0
# .env.production
REACT_APP_URL=http://toutiao.itheima.net/v1_0
创建好环境变量，将来就可以在代码中来使用了：
export const baseURL = process.env.REACT_APP_URL
步骤：

  1. 在项目根目录中分别创建 .env.development 和 .env.production 文件
  2. 分别在两个文件中，创建接口地址的环境变量
  3. 在封装 http 时，读取环境变量中的接口地址作为 baseUrl
  4. 重启项目，让环境变量生效

    09-代理解决跨域问题

    目标：能够配置代理解决跨域问题
    内容：
    CRA 代理配置参考文档
    http-proxy-middleware 文档
    通过 CRA 中自带的配置，借助第三方包 http-proxy-middleware 来实现代理功能
    src/setupProxy.js 中：
    const { createProxyMiddleware } = require(‘http-proxy-middleware’)

    module.exports = function (app) {
    app.use(
    // 代理标识
    ‘/api’,
    // 代理配置
    createProxyMiddleware({
    // 目标服务器地址
    target: ‘http://toutiao.itheima.net/v1_0/‘,
    changeOrigin: true,
    pathRewrite: {
    // 去掉接口中的 /api 前缀
    ‘^/api’: ‘’
    }
    })
    )
    }
    注：本项目后端已经实现cors，这里只是演示。