打包优化

包体积可视化

安装source-map-explorer
npm install source-map-explorer
在package.json中配置
"analyze": "source-map-explorer 'build/static/js/*.js'"

cdn优化

在craco.config.js中配置(在alias后面接上)
configure: (webpackConfig) => {
    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.3.1/umd/react.production.min.js',
                'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js'
            ]
        }
    })
    const { isFound, match } = getPlugin(
        webpackConfig,
        pluginByName('HtmlWebpackPlugin')
    )
    if (isFound) {
        // match.userOptions打包会报错，需要使用options
        match.options.files = cdn
    }
    return webpackConfig
}
在/public/index.html中配置
<% htmlWebpackPlugin.options.files.js.forEach(cdnURL => { %>
  <script src="<%= cdnURL %>"></script>
<% }) %>