在create-react-app官网中找到Development列表下的Analyzing the Bundle Size
按着指示加东西就行了
运行npm run analyze之后出现这个
用server-s build运行， 然后打开控制台的network选中js发现加载了四个js文件， 都是变成gzip格式（即原本的1.7mb的文件被压缩成了几百kb， ， 看下面图的size）
但是就算是被gzip压缩过了， 发现首屏体积太大了， 我想在首屏进来的时候快一点
根据上面分析出的打包体积图， 发现编辑页和统计页可以拆分出去
怎么拆分？
路由懒加载，拆分bundle, 优化首页体积
//import Edit from '../pages/question/Edit'
//import Stat from '../pages/question/Stat'
const Edit = lazy(() => import('../pages/question/Edit'))
const Stat = lazt(() => import('../pages/question/Stat')
然后重新构建npm run build
发现文件名不好识别， 增加引入文件注释
//import Edit from '../pages/question/Edit'
//import Stat from '../pages/question/Stat'
const Edit = lazy(() => import(/* webpackChunkName: "editPage" */'../pages/question/Edit'))
const Stat = lazt(() => import(/* webpackChunkName: "estatPage" */'../pages/question/Stat')
重新npm run bundle
发现把js和css的都拆分出来了
第三方库基本上不变， 但是每次不涉及到第三方库的更新，网页请求却都会重新加载一遍，这太慢了，我们要把这些代码抽离出来
第三方库锁定版本：在版本号前加上^来锁定版本
如果不主动升级， 第三方库代码是不会变的 所以说可以把第三方的不常变的代码抽离出来进行缓存 怎么抽离？ cra的webpack是无法配置的， 要是配置了， 后续也不好修改， 就用到craco来进行代理配置
解决方案: 使用craco代理配置Welcome | CRACO
之前在项目中为了用mock模拟后端发送数据， 已经用craco对端口进行了代理， 所以我们在之前创建出的craco.config.js文件中继续增加
在webpack官网中找optimization.splitChunks
这个抽离公共代码是在build构建也就是在发布生产环境下执行的
上抽离代码
好了， 现在上配置代码
这里面test是用来匹配路径的， name是分出的包名， priority是权限 ， 这里是为了实现antd， react， 第三方库分开的配置
然后我们再analyze就得出
这样不常更新的地方就会缓存下来不重复请求了， 只有src会更新了，而src体积很小
cra会自动根据路由的情况自动拆分css， 也就是说懒加载那部分的css会被单独拆分出， 很方便
好了， 结束
