打包优化---React

打包优化--体积

1.安装包npm i source-map-explorer

2.配置命令指定要分析的js文件

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    //添加这行代码  分析 build/static/ 下面的所有js文件夹
    "analyze": "source-map-explorer 'build/static/js/*.js"
  },

3.运行 npm run analyze

打包优化--CDN

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

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

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

craco.config.js

const { getPlugin, pluginByName } = require("@craco/craco");
const path = require("path");

module.exports = {
  // webpack 配置
  webpack: {
    //配置别名
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    configure: (webpackConfig) => {
      let cdn;
      whenProd(() => {
        // key: 不参与打包的包(由dependencies依赖项中的key决定)
        // value: cdn文件中 挂载于全局的安量名称 为了替换之前在开发环境下
        webpackConfig.externals = {
          react: "React",
          "react-dom": "ReactDOM",
        };

        // 配置现成的cdn资源地址
        // 实际开发的时 用公司自己花钱买的cdn服务器
        cdn = {
          js: [
            "https://",
            "https://",
          ],
        };

        // 通过 htnlWebpackPlugin捂件 在public/index.htnl注入cdn资源
        const { isFound, match } = getPlugin(
          webpackConfig,
          pluginByName("HtmlWebpackPlugin")
        );
        if (isFound) {
          // 找到了HtmlWebpackPlugin的括件
          match.userOptions.cdn = cdn;
        }
        return webpackConfig;
      });
    },
  },
};

public/index.html

<% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL=> { %>
    <script src="<%= cdnURL %>"></script>
<% }) %>