广西建设职业技术学院管理工程系网站2014考试前培训时间,能源公司网站建设,深圳网站建设公司信息,深圳闭环转运文章目录 react之unpkg.com前端资源加载慢什么是unpkg.com加载慢原因解决方案替换国内cdn在 package.json 中打包进来 react之unpkg.com前端资源加载慢
什么是unpkg.com
unpkg 是一个内容源自 npm 的全球快速 CDN。
作为前端开发者#xff0c;我们对 unpkg 都不陌生#x… 文章目录 react之unpkg.com前端资源加载慢什么是unpkg.com加载慢原因解决方案替换国内cdn在 package.json 中打包进来 react之unpkg.com前端资源加载慢
什么是unpkg.com
unpkg 是一个内容源自 npm 的全球快速 CDN。
作为前端开发者我们对 unpkg 都不陌生它是一个基于 npm registry 的静态资源 CDN 服务。
它提供了一种快捷的静态资源访问能力只需要遵循约定的 URL 进行访问即可在页面中加载任意 npm 包里面的文件内容。虽然前端的开发模式已经不像当年那么的轻量的往往需要用 webpack 等构建后进行部署。但在很多轻量的场景下往往希望直接引入公共的 npm 包
加载慢原因
unpkg有时候会被墙了unpkg上的相关资源都不能访问才导致项目资源加载不出。
解决方案
替换国内cdn
在react项目 config/config.ts 中找到相关配置关键字 unpkg.com
export default defineConfig({// 前端配置了 publicPath 为 /static/那么前端应用程序在生产环境下应该通过 /static/ 路径来访问静态资源publicPath: process.env.NODE_ENV production ? /static/ : /,hash: true,antd: {},dva: {hmr: true,},// for Ant Design Charts https://pro.ant.design/zh-CN/docs/graphscripts: [https://unpkg.com/react17/umd/react.production.min.js,https://unpkg.com/react-dom17/umd/react-dom.production.min.js,https://unpkg.com/ant-design/charts1.0.5/dist/charts.min.js,//使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用//https://unpkg.com/ant-design/charts1.0.5/dist/charts_g6.min.js,],externals: {react: React,react-dom: ReactDOM,ant-design/charts: charts},把 unpkg.com 换成国内cdn源。
把 unpkg.com 替换成unpkg.zhimg.com
在 package.json 中打包进来
可以将这些脚本的加载方式从外部 CDN 改为在 package.json 中打包进来。
config/config.ts 中找到相关配置关键字 unpkg.com scripts: [//全部注释掉不使用cdn源直接pacakge.json中引入// https://unpkg.com/react17/umd/react.production.min.js,// https://unpkg.com/react-dom17/umd/react-dom.production.min.js,// https://unpkg.com/ant-design/charts1.0.5/dist/charts.min.js,//使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用//https://unpkg.com/ant-design/charts1.0.5/dist/charts_g6.min.js,],// externals 是 webpack 中的一个配置项它允许你将一些模块标记为外部依赖即不会被打包到最终的输出文件中。在这个配置项中你可以将某些模块指定为外部依赖并且指定他们在全局变量中的名称这样在你的代码中使用这些模块时webpack 就会从全局变量中引用它们而不是将它们打包进输出文件中。externals: {// react: React,// react-dom: ReactDOM,// ant-design/charts: charts},这段代码是用于加载所需的 JavaScript 库的脚本。scripts、externals的内容我们注释掉~ 注意 externals 是 webpack 中的一个配置项它允许你将一些模块标记为外部依赖即不会被打包到最终的输出文件中。在这个配置项中你可以将某些模块指定为外部依赖并且指定他们在全局变量中的名称这样在你的代码中使用这些模块时webpack 就会从全局变量中引用它们而不是将它们打包进输出文件中。
根据你注释的情况安装包比如根据上面安装如下
npm install react react-dom ant-design/charts在 React 应用中通常会使用 react 和 react-dom 库来创建和渲染组件。而 ant-design/charts 库是 Ant Design 提供的一个基于 G2Plot 的图表库用于绘制各种类型的图表。
然后打包前端
npm run build
