react 打包优化，cdn引入css、js

前言

本文基于

• “react”: “^18.2.0”

1.暴露隐藏的webpack配置

react官方脚手架默认是将 webpack 配置隐藏起来了，在进行配置之前需要将 webpack 配置暴露出来

yarn eject

会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?

输入 y 回车

成功之后 在项目根目录会出现一个 scripts 文件夹

2.配置cdn引入

打开 scripts 文件夹下的 build.js 文件

搜索 configFactory， 并添加如下配置

// 配置不进行webpack打包的文件
const externals = {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'axios': 'axios'
};

// 配置cdn引入
const cdn = {
  css: [],
  js: [
    'https://lib.baomitu.com/react/18.2.0/umd/react.production.min.js',
    'https://lib.baomitu.com/react-dom/18.2.0/umd/react-dom.production.min.js',
    'https://lib.baomitu.com/axios/0.27.2/axios.min.js'
  ],
};

config.plugins[0].userOptions = Object.assign(config.plugins[0].userOptions, { cdn });
config.externals = externals;

3.配置 index.html

build.js配置的CDN css js链接，需要在index.html文配置引入

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

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

4.效果图

部署至服务器后访问，cdn引入已生效

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。