贵州省住房和城乡建设厅网站-首页,项目立项查询平台,网站建设的讲话要求,网站出现乱码一、React项目打包流程
一、React项目打包流程1. 项目打包打包命令#xff1a;npm run build2. 预览接着命令行会提示执行#xff1a;
先#xff1a;npm install -g serve
然后执行此命令#xff1a;serve -s build二、打包优化 - 配置路由懒加载
二、打包优化 - 配置路…一、React项目打包流程
一、React项目打包流程1. 项目打包打包命令npm run build2. 预览接着命令行会提示执行
先npm install -g serve
然后执行此命令serve -s build
二、打包优化 - 配置路由懒加载
二、打包优化 - 配置路由懒加载
路由懒加载是指路由的JS资源只有在被访问时才会动态获取目的是为了优化项目首次打开的时间1. 把路由修改为由React提供的lazy函数进行动态导入
2. 使用React内置的Suspense组件包裹路由中element选项对应的组件代码如下所示
// 路由配置
import { Suspense, lazy } from react;
import { AuthRoute } from /components/AuthRoute;
import { createBrowserRouter } from react-router-dom;// 一级路由
import Layout from /pages/Layout;
import Login from /pages/Login;// 1. lazy函数对二级路由组件进行导入
const Home lazy(() import(/pages/Home))
const Article lazy(() import(/pages/Article))
const Publish lazy(() import(/pages/Publish))// 二级路由
// import Home from /pages/Home;
// import Article from /pages/Article;
// import Publish from /pages/Publish;// 配置路由实例
const router createBrowserRouter([{path: /,// 根据权限的有无控制路由跳转element: AuthRouteLayout //AuthRoute,children: [{path: home,element: Suspense fallback加载中Home //Suspense},{path: article,element: Suspense fallback加载中Article //Suspense},{path: publish,element: Suspense fallback加载中Publish //Suspense}]},{path: /login,element: Login /}
])export default router;
三、打包优化 - 包体积分析
三、打包优化 - 包体积分析通过可视化的方式直观的体现项目中各种包打包之后的体积大小方便做优化1. 安装包 -- source-map-explorernpm i source-map-explorer2. 配置命令指定要分析的js文件在package.json内scripts添加如下代码analyze: source-map-explorer build/static/js/*.jsscripts: {start: craco start,build: craco build,test: craco test,eject: craco eject,analyze: source-map-explorer build/static/js/*.js
}
四、打包优化 - CDN优化
四、打包优化 - CDN优化1. 什么是CDN
CDN是一种内容分发网络服务当用户请求网站内容时由离用户最近的服务器将缓存的资源内容传递给用户2. 哪些资源可以放到CDN服务器
体积较大的非业务JS文件比如react、react-dom
⑴. 体积较大需要利用CDN文件在浏览器的缓存特性加快加载时间
⑵. 非业务JS文件不需要经常做变动CDN不用频繁更新缓存3. 项目中怎么做
⑴. 把需要做CDN缓存的文件排除在打包之外reactreact-dom
⑵. 以CDN的方式重新引入资源react、react-dom1. 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)},// 配置CDNconfigure: webpackConfig {let cdn;whenProd(() {// 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.cdn cdn;}return webpackConfig;}}
}2. public文件夹下index.html代码如下bodynoscriptYou need to enable JavaScript to run this app./noscriptdiv idroot/div!-- 动态插入cdn资源url 加载第三发包的 CDN 链接 --% htmlWebpackPlugin.userOptions.cdn.js.forEach(cdnURL { %script src% cdnURL %/script% }) %
/body
