利用路由懒加载和CDN分发策略对极客园项目进行性能优化

文章目录

前言
- 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: <AuthRouter><Layout /></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 router

2.项目资源打包

在终端执行命令，将项目中的源代码和资源文件进行处理，生成可在生产环境运行的js的静态资源

npm run build

然后执行命令打开本地的静态资源，模拟运行生产服务器运行项目

  serve -s build

在这里插入图片描述

3.包体积可视化分析

通过可视化分析，查看项目中各种包打包之后的体积大小，并执行对应大体积的相应优化操作，首先安装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 analyze

在这里插入图片描述

4.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添加到项目中

<body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL=> { %><script src="<%= cdnURL %>"></script><% }) %>
</body>