react项目打包和优化

看一下数据结构的内容，感觉对我处理后端返回的数据并且提交到页面当中很有效，或者是在处理提交数据的时候

处理调用更新接口的时候出现的错误，传递过去的id为空

原因是因为请求参数reqData当中并没有id这个属性，所以添加上一个id的选项就可以了

updateArticleAPI({ ...reqData, id: articleId })

1. 项目打包

打包指的是将项目中的 源代码和资源文件进行处理 ，生成可在生产环境中运行的 静态文件 的过程

打包命令： npm run build

2. 本地预览（模拟服务器运行项目）

本地预览是指在本地通过静态服务器模拟生产服务器运行项目的过程

1. 安装本地服务包 npm i -g serve  安装好了之后就可以使用serve这个全局包开启一个本地的项目了

2. serve -s ./build   以build这个文件夹作为一个静态目录生成一个静态服务器

3. 浏览器中访问 http://localhost:3000/  访问网址看自己的

2.打包优化-配置路由懒加载

什么是路由懒加载？

路由懒加载是指路由的JS资源只有在被访问时才会动态获取，目的是为了 优化项目首次打开的时间

如何进行配置？

1. 把路由修改为由React提供的 lazy 函数进行动态导入

import { lazy } from 'react';
// lazy函数对组件进行导入 
const Home = lazy(() => import('@/pages/Home'))
const Article = lazy(() => import('@/pages/Article'))
const Publish = lazy(() => import('@/pages/Publish'))

2. 使用React内置的 Suspense组件 包裹路由中element选项对应的组件

      {
        path: 'home',
        element: <Suspense fallback={'加载中'}><Home /></Suspense> // 提供了一个异步渲染
      },

3.打包优化-包体积分析

通过 可视化 的方式，直观的体现项目中各种包打包之后的体积大小，方便做优化

执行命令：

npm i source-map-explorer --legacy-peer-deps

在package.json当中配置

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "analyze": "source-map-explorer 'build/static/js/*.js'"
  },

保存之后执行

npm run analyze

然后就会自动打开浏览器查看效果了

根据包体积分析来进行对应的优化，减小包的体积

打包优化-CDN优化

CDN一种内容分发网络服务，当用户请求网站内容时，由 离用户最近的服务器 将 缓存 的资源内容传递给用户

哪些资源可以放到CDN服务器：

体积较大的 非业务JS文件 , 比如react、react-dom

1. 体积较大，需要利用CDN文件在浏览器的缓存特性，加快加载时间

2. 非业务JS文件，不需要经常做变动，CDN不用频繁更新缓存

项目中怎么做：

1. 把需要做CDN缓存的文件排除在打包之外（react、react-dom）

2. 以CDN的方式重新引入资源（react、react-dom）

显示报错信息，不能读取未定义的属性js，在index.html文件中

public/index.html下的代码：

<!-- 动态插入cdn资源 -->
  <% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL=> { %>
    <script src="<%= cdnURL %>"></script>
    <% }) %>

这个js属性在cdn的对象下，所以应该排查一下cdn是否存在的问题，或者说在往上找，排查options对象当中是否存在cdn属性，有些地方写的是userOptions.files，可能是因为htmlWebpackPlugin对象下面是userOptions这个选项，而不是options这个选项，所以会有差异，而我这个地方打印了math对象下面出现的结果就是options选项，（打印的结果是在执行打包命令：npm run build 之后出现的，之前没有打包直接执行的，就出现了找不到js或者cdn的情况，两种属性找不到的情况类似），在option对象下面找到cdn这个选项进行赋值即可（match.options.cdn = cdn;），也可以随便取个名字，比如files也可（match.options.files = cdn;）

总结：主要是找到match下面是options对象或者userOptions对象，并且在index.html文件下面插入的是对应的options或者userOptions对象上即可，前后写法可以不一样，有些地方给userOptions添加属性cdn，但是index.html当中写的options进行查找也是正确的

也有可能是npm i html-webpack-plugin@4.5.0 --save-dev 没有下载的原因，多方面都试一下

在craco.config.js当中的配置

// 扩展webpack配置
const path = require('path')
// 从craco当中导入过来的一些辅助函数
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
// const htmlWebpackPlugin = require('html-webpack-plugin');
// new webpack.ProvidePlugin({
//   "React": "react",
// }),
module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    },
    // plugins: [
    //   new htmlWebpackPlugin({
    //     // template: './public/index.html', // 如果使用模板文件，确保路径正确
    //     filename: './build/index.html', // 如果使用模板文件，确保路径正确
    //   }),
    // ],
    // 配置webpack
    // 配置CDN
    configure: webpackConfig => {
      // 声明一个cdn变量，存储现行资源的
      let cdn = {
        js: []
      }
      whenProd(() => {
        // key: 不参与打包的包（由dependencies依赖项中的key决定）
        // value: cdn文件中，挂载于全局的变量名称，为了替换之前在开发环境下
        webpackConfig.externals = {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
        // 配置现成的cdn资源地址
        // 实际开发的时候，用公司自己花钱买的cdn服务器
        cdn = {
          js: [
            "https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"
          ]
        }
      });
      console.log(cdn)
      // 通过htmlWebpackPlugin插件，在public/index.html注入cdn资源url
      const { isFound, match } = getPlugin(webpackConfig, pluginByName('HtmlWebpackPlugin'));
      if (isFound) {
        // 找到了HtmlWebpackPlugin的插件
        console.log('333', cdn)
        match.options.cdn = cdn;
        console.log('333', match)
      } else {
        console.log('44')  //这个地方是为了排查我是否找到了这个选项，如果没有找到，说明我其他地方出问题了，可能原因是HtmlWebpackPlugin的导入问题
      }

      return webpackConfig;
    }
  }
}