利用路由懒加载和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分发的方法,在可视化界面上用户可以看见构建下的资源体积大小,通过压缩和利用缓存也可以减少体积,加快加载时间

相关推荐
持久的棒棒君43 分钟前
npm安装electron下载太慢,导致报错
前端·electron·npm
crary,记忆3 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz3 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou03 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干4 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大4 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu4 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
星辰离彬4 小时前
Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解
java·spring boot·后端·sql·mysql·性能优化
鱼樱前端4 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js