react打包优化，使用cdn加载第三方库，cdn加速网页

1、安装

pnpm install html-webpack-externals-plugin customize-cra react-app-rewired

 

2、在项目根目录下新建config-overrides.js文件,package.json中改为react-app-rewired 启动和打包,如下

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

　　

3、config-overrides.js中使用插件，externals 是一个数组，可以按照第一个对象的格式添加需要使用cdn加速的插件

const HtmlWebpackExternalsPlugin = require("html-webpack-externals-plugin");
const addCustomize = () => (config) => {
  config.plugins.push(
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: "react",   //打包需要忽略的文件,不打包进去，使用cdn的文件
          entry:
            "https://cdn/react.production.min.js",　//cdn公共库插件地址，仅是示例,需要替换成自己选择的cdn插件url地址，entry可以为一个数组，里面填多个css或js地址，如antd同时需要js和css
          global: "React", //全局上的名称，可以通过window.React调用
        },
      ],
    })
  );
  return config;
};
module.exports = override(addCustomize());

　4、打包部署到线上测试