react打包优化【第三方库使用cdn】对于 react、react-router、redux、axios和antd等等

前言

对于 react、react-router、redux、axios和antd等等这些不经常改动的库、我们让webpack不对他们进行打包，通过cdn引入，可以减少代码的大小、也可以减少服务器的带宽，网站首次加载会更快。

webpack配置

这里以creat-react-app为例

webpack的配置文件默认是隐藏的,yarn eject可将配置文件暴露出来.

1. 打开 config 文件夹下的 webpack.config.js 文件

图片已失效

2. 找到 plugins 的 new HtmlWebpackPlugin 配置项，新增红框内的内容（用于配置CDN）

图片已失效

            files: {
              js: [],
              css: [],
            },

3. 新增 externals 配置项，和第三步的 plugins 同级（用于配置webpack排除打包的模块）

图片已失效

4.配置 scripts 文件夹下的 build.js

图片已失效

// 配置cdn引入
config.plugins[0].userOptions.files.js = [
  "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
  "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
  "https://lib.baomitu.com/redux/4.1.2/redux.min.js",
  "https://lib.baomitu.com/axios/0.27.2/axios.min.js",
  "https://lib.baomitu.com/lodash.js/4.17.21/lodash.min.js",
  "https://lib.baomitu.com/antd/4.21.4/antd.min.js",
  "https://lib.baomitu.com/aplayer/1.10.1/APlayer.min.js",
];

config.plugins[0].userOptions.files.css = [];

// 配置不进行webpack打包的文件
config.externals = {
  react: "React",
  "react-dom": "ReactDOM",
  redux: "Redux",
  "redux-thunk": "ReduxThunk",
  axios: "axios",
  antd: "antd",
  lodash: "_",
  aplayer: "APlayer",
};

因为react开发环境和生产环境使用的是不同文件（可查看package.json的scripts字段），所以直接配置 build.js 文件就可以，不用特意写环境判断代码

5. 配置 index.html ,引入配置的CDN js css链接

图片已失效

  <head>
    <!-- require cdn assets css -->
    <% for (var i in htmlWebpackPlugin.options.files &&
    htmlWebpackPlugin.options.files.css) { %>
    <link
      rel="stylesheet"
      href="<%= htmlWebpackPlugin.options.files.css[i] %>"
    />
    <% } %>
  </head>

  <body>
    <!-- require cdn assets js -->
    <% for (var i in htmlWebpackPlugin.options.files &&
    htmlWebpackPlugin.options.files.js) { %>
    <script
      type="text/javascript"
      crossorigin
      src="<%= htmlWebpackPlugin.options.files.js[i] %>"
    ></script>
    <% } %>
  </body>
</html>

最终效果

图片已失效