【React】打包优化-配置CDN
CDN 是一种内容分发网络服务，当用户请求网站内容时，由离用户最近的服务器将缓存的资源内容传递给用户。
哪些资源可以放到CDN服务器？（比如react、 react-dom）
- 体积较大，需要利用CDN文件在浏览器的缓存特性，加快加载时间
- 非业务JS文件，不需要经常做变动，CDN不用频繁更新缓存
项目中怎么做？
- 把需要做CDN缓存的文件排除在打包之外（react、 react-dom)
- 以CDN的方式重新引入资源（react、react-dom)
// ``craco.config.js``// 添加自定义对于webpack的配置const path = require('path')
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')module.exports = {// webpack 配置webpack: {// 配置别名alias: {// 约定：使用 @ 表示 src 文件所在路径'@': path.resolve(__dirname, 'src')},// 配置webpack// 配置CDNconfigure: (webpackConfig) => {let cdn = {js:[]}// 当前是否是生产环境，只有生产环境才需要 CDNwhenProd(() => {// key: 不参与打包的包(由dependencies依赖项中的key决定)// value: cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下webpackConfig.externals = {react: 'React','react-dom': 'ReactDOM'}// 配置现成的cdn资源地址// 实际开发的时候 用公司自己花钱买的cdn服务器cdn = {js: ['https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js','https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js',]}})// 通过 htmlWebpackPlugin 插件 在 public/index.html 注入 cdn 资源 urlconst { isFound, match } = getPlugin(webpackConfig,pluginByName('HtmlWebpackPlugin'))if (isFound) {// 找到了 HtmlWebpackPlugin 的插件match.userOptions.files = cdn}return webpackConfig}}
}
// public/index.html<body><div id="root"></div><!-- 加载第三发包的 CDN 链接 --><% htmlWebpackPlugin.options.files.js.forEach(cdnURL => { %><script src="<%= cdnURL %>"></script><% }) %>
</body>