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

发布时间 2024-01-03 17:44:45作者: 随心的博客
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中使用插件
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公共库插件地址
          global: "React", //全局上的名称,可以通过window.React调用
        },
      ],
    })
  );
  return config;
};
module.exports = override(addCustomize());

 4、打包部署到线上测试