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

文章目录


前言

极客园项目的完成之后,我们需要对项目进行打包以及性能优化,优化用户体验以及加快响应时间,本文只列举了路由懒加载和cdn分发的策略


1.配置路由懒加载

为了避免在首次加载时加载全部路由的js资源,优化首次加载时间,使路由的js资源只有在被访问时才会动态获取,在router里将原来的二级路由的直接导入改为采用lazy函数导入,在导入部分利用suspense组件包裹,在加载之前利用fallback显示加载信息

javascript 复制代码
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的静态资源

javascript 复制代码
npm run build

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

javascript 复制代码
  serve -s build

3.包体积可视化分析

通过可视化分析,查看项目中各种包打包之后的体积大小,并执行对应大体积的相应优化操作,首先安装source-map-explorer

javascript 复制代码
npm i source-map-explorer --legacy-peer-deps

在package.json中的script里添加启动命令,分析打包后的所有js文件体积

javascript 复制代码
 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",
    "analyze":"source-map-explorer 'build/static/js/*.js'"
  },

在终端执行分析命令

javascript 复制代码
 npm run analyze

4.cdn配置

使用cdn可以加快加载时间,会将离用户最近的服务器将缓存的资源传递给用户

在craco.config.js里添加以下代码

javascript 复制代码
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添加到项目中

javascript 复制代码
<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>

总结

前端优化的方式有很多种,这里只列举出了依靠路由懒加载和cdn分发的方法,在可视化界面上用户可以看见构建下的资源体积大小,通过压缩和利用缓存也可以减少体积,加快加载时间

相关推荐
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
Jacky(易小天)7 小时前
MongoDB比较查询操作符中英对照表及实例详解
数据库·mongodb·typescript·比较操作符
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js