分析说明：通过 craco 来修改 webpack 配置，从而实现 CDN 优化

    craco.config.js

    1. // 添加自定义对于webpack的配置
    3. const path = require('path')
    4. const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
    6. module.exports = {
    7.   // webpack 配置
    8.   webpack: {
    9.     // 配置CDN
    10.     configure: (webpackConfig) => {
    11.       // webpackConfig自动注入的webpack配置对象
    12.       // 可以在这个函数中对它进行详细的自定义配置
    13.       // 只要最后return出去就行
    14.       let cdn = {
    15.         js: [],
    16.         css: []
    17.       }
    18.       // 只有生产环境才配置
    19.       whenProd(() => {
    20.         // key:需要不参与打包的具体的包
    21.         // value: cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下
    22.         // 通过import 导入的 react / react-dom
    23.         webpackConfig.externals = {
    24.           react: 'React',
    25.           'react-dom': 'ReactDOM'
    26.         }
    27.         // 配置现成的cdn 资源数组 现在是公共为了测试
    28.         // 实际开发的时候 用公司自己花钱买的cdn服务器
    29.         cdn = {
    30.           js: [
    31.             'https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js',
    32.             'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js',
    33.           ],
    34.           css: []
    35.         }
    36.       })
    38.       // 都是为了将来配置 htmlWebpackPlugin插件 将来在public/index.html注入
    39.       // cdn资源数组时 准备好的一些现成的资源
    40.       const { isFound, match } = getPlugin(
    41.         webpackConfig,
    42.         pluginByName('HtmlWebpackPlugin')
    43.       )
    45.       if (isFound) {
    46.         // 找到了HtmlWebpackPlugin的插件
    47.         match.userOptions.cdn = cdn
    48.       }
    50.       return webpackConfig
    51.     }
    52.   }
    53. }

    public/index.html

    1. <body>
    2.   <div id="root"></div>
    3.   <!-- 加载第三发包的 CDN 链接 -->
    4.   <% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL => { %>
    5.     <script src="<%= cdnURL %>"></script>
    6.     <% }) %>
    7. </body>