文章目录
前言
极客园项目的完成之后，我们需要对项目进行打包以及性能优化，优化用户体验以及加快响应时间，本文只列举了路由懒加载和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 />}])exportdefault 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 instanceofHtmlWebpackPlugin);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>
总结
前端优化的方式有很多种，这里只列举出了依靠路由懒加载和cdn分发的方法，在可视化界面上用户可以看见构建下的资源体积大小，通过压缩和利用缓存也可以减少体积，加快加载时间
本文转载自: https://blog.csdn.net/Bin_niB/article/details/136071607
版权归原作者 -_-你好-_- 所有， 如有侵权，请联系我们删除。
版权归原作者 -_-你好-_- 所有， 如有侵权，请联系我们删除。