建网站卖饮料,wordpress去掉浏览数,做门户网站需要什么条件,wordpress 读书模板文章目录 前言1.配置路由懒加载2.项目资源打包3.包体积可视化分析4.cdn配置 总结 前言
极客园项目的完成之后#xff0c;我们需要对项目进行打包以及性能优化#xff0c;优化用户体验以及加快响应时间#xff0c;本文只列举了路由懒加载和cdn分发的策略 1.配置路由懒加载
… 文章目录 前言1.配置路由懒加载2.项目资源打包3.包体积可视化分析4.cdn配置 总结 前言
极客园项目的完成之后我们需要对项目进行打包以及性能优化优化用户体验以及加快响应时间本文只列举了路由懒加载和cdn分发的策略 1.配置路由懒加载
为了避免在首次加载时加载全部路由的js资源优化首次加载时间使路由的js资源只有在被访问时才会动态获取在router里将原来的二级路由的直接导入改为采用lazy函数导入在导入部分利用suspense组件包裹在加载之前利用fallback显示加载信息
import { createBrowserRouter } from react-router-dom;
import Layout from /pages/Layout;
import Login from /pages/Login;
import AuthRouter from /components/AuthRoute;
import { Suspense, lazy } from react;const Home lazy(() import(/pages/Home))
const Article lazy(() import(/pages/Article))
const Publish lazy(() import(/pages/Publish))const router createBrowserRouter([{path: /,element: AuthRouterLayout //AuthRouter,children: [{index: true,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 router2.项目资源打包
在终端执行命令将项目中的源代码和资源文件进行处理生成可在生产环境运行的js的静态资源
npm run build然后执行命令打开本地的静态资源模拟运行生产服务器运行项目 serve -s build3.包体积可视化分析
通过可视化分析查看项目中各种包打包之后的体积大小并执行对应大体积的相应优化操作首先安装source-map-explorer
npm i source-map-explorer --legacy-peer-deps在package.json中的script里添加启动命令分析打包后的所有js文件体积 scripts: {start: craco start,build: craco build,test: craco test,eject: craco eject,analyze:source-map-explorer build/static/js/*.js},在终端执行分析命令 npm run analyze4.cdn配置
使用cdn可以加快加载时间会将离用户最近的服务器将缓存的资源传递给用户 在craco.config.js里添加以下代码
const path require(path);
const { whenProd } require(craco/craco);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {webpack: {alias: {: path.resolve(__dirname, src)},configure: (webpackConfig) {let cdn {js: []};whenProd(() {webpackConfig.externals {react: React,react-dom: ReactDOM};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,]};});const htmlWebpackPlugin webpackConfig.plugins.find((plugin) plugin instanceof HtmlWebpackPlugin);if (htmlWebpackPlugin) {htmlWebpackPlugin.options.cdn cdn;}return webpackConfig;}}
};
在public/index.html中添加以下代码遍历cdn的url添加到项目中
bodynoscriptYou need to enable JavaScript to run this app./noscriptdiv idroot/div% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL { %script src% cdnURL %/script% }) %
/body总结
前端优化的方式有很多种这里只列举出了依靠路由懒加载和cdn分发的方法在可视化界面上用户可以看见构建下的资源体积大小通过压缩和利用缓存也可以减少体积加快加载时间
