文章目录
前言
极客园项目的完成之后,我们需要对项目进行打包以及性能优化,优化用户体验以及加快响应时间,本文只列举了路由懒加载和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分发的方法,在可视化界面上用户可以看见构建下的资源体积大小,通过压缩和利用缓存也可以减少体积,加快加载时间