头条有没有做网站的,安庆专业网站建设公,网站备案时间怎么查询,自己做的网站点进去很卡CDN 是一种内容分发网络服务#xff0c;当用户请求网站内容时#xff0c;由离用户最近的服务器将缓存的资源内容传递给用户。
哪些资源可以放到CDN服务器#xff1f;#xff08;比如react、 react-dom#xff09;
体积较大#xff0c;需要利用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.htmlbodydiv idroot/div!-- 加载第三发包的 CDN 链接 --% htmlWebpackPlugin.options.files.js.forEach(cdnURL { %script src% cdnURL %/script% }) %
/body
