江苏龙网

  1. 主页 > 生活百科 > >

前端性能优化应该怎么做？

前端

前言最近零零散散的对刚接手的一个新项目做了一些优化，白屏、打包相关的内容都涉及到了，写一篇文章来记录一下 。
白屏相关DNS预解析、资源预加载对于项目中有很多静态资源涉及到的公共域名，如g.alicdn.cmon，采用DNS预连接 + 解析：
<link rel="preconnect" href=https://www.isolves.com/it/cxkf/qd/2023-12-15/"//g.alicdn.com" crossorigin />对于项目中一些必要的JS资源，采用资源预加载 ， 可以大幅度缩短资源加载时间：
<link rel="preload" href=https://www.isolves.com/it/cxkf/qd/2023-12-15/"https://g.alicdn.com/eleme-risk/xxxxxxx-pc/0.0.99/js/index.js" as="script" />结果：整体白屏时间降低400~600ms 。
页面级路由懒加载原本项目打包出来的JS文件只有一个bundle.js，涵盖了整个项目的业务代码，对于业务方来说来说，可能访问最多的就是新增和详情两个页面，所以对于首屏加载是不友好的，应该优化成访问哪个页面加载对应页面的资源，基于Ice2.0调研，将路由中的组件都转换为懒加载模式：
routes.ts
import { lazy, IRouterConfig } from 'ice';// ice不支持layout组件设置为懒加载import Layout from '@/layouts/BasicLayout';const Home = lazy(() => import(/* webpackChunkName: 'Home' */ '@/pages/Home'));const NotFound = lazy(() => import(/* webpackChunkName: 'NotFound' */ '@/components/NotFound'));const ManualDetect = lazy(() => import(/* webpackChunkName: 'ManualDetect' */ '@/pages/ManualDetect'));const AddMission = lazy(() => import(/* webpackChunkName: 'addMission' */ '@/pages/ReconnAIssanceMission/add-mission'));const MissionDetail = lazy(() => import(/* webpackChunkName: 'missionDetail' */ '@/pages/ReconnaissanceMission/missionDetail'),);const NewMissionDetail = lazy(() => import(/* webpackChunkName: 'newMissionDetail' */ '@/pages/ReconnaissanceMission/newMissionDetail'),);const NoPermission = lazy(() => import(/* webpackChunkName: 'NoPermission' */ '@/pages/NoPermission'));const Board = lazy(() => import(/* webpackChunkName: 'Board' */ '@/pages/Board'));const BusinessInsight = lazy(() => import(/* webpackChunkName: 'BusinessInsight' */ '@/pages/BusinessInsight'));const ChuangDaoInsight = lazy(() => import(/* webpackChunkName: 'ChuangDaoInsight' */ '@/pages/ChuangDaoInsight'));const Report = lazy(() => import(/* webpackChunkName: 'Report' */ '@/pages/Report'));const routes: IRouterConfig[] = [{path: '/',component: Layout,children: [{path: '/manualDetect',component: ManualDetect,},{path: '/addMission',component: AddMission,},{path: '/MissionDetail',component: MissionDetail,},{path: '/newMissionDetail',component: NewMissionDetail,},{path: '/',exact: true,component: Home,},{path: '/noPermission',exact: true,component: NoPermission,},{path: '/board',exact: true,component: Board,},{path: '/businessInsight',exact: true,component: BusinessInsight,},{path: '/chuangDaoInsight',exact: true,component: ChuangDaoInsight,},{path: '/report',exact: true,component: Report,},{component: NotFound,},],},];export default routes;看一下效果 。
在改动前是这样的：

前端性能优化应该怎么做？

文章插图
图片
无论访问哪个页面 ， 请求固定的JS文件，大小为2.3MB 。
改动以后发版：
首屏刷新：
前端性能优化应该怎么做？

文章插图
图片
切换一个路由：
前端性能优化应该怎么做？

文章插图
图片
效果很明显了，文件资源也小了很多 ， 白屏时间自然就下降了 。
详细的文章在这里：
React中的懒加载以及在Ice中实践
结果：白屏时间整体降低 ， 请求资源大小整体下降 。
构建相关优化本地热更新时间项目本地热更新时间比较慢，大约在8~9秒 ， 基于ice运行时中间件在每次代码变更时加入缓存同时移除对node_module目录下的babel转换，可以写一段这样的代码：
module.exports = ({ onGetWebpackConfig }) => {onGetWebpackConfig((config) => {config.module.rule('tsx').test(/.jsx?|.tsx?$/).exclude.add(/node_modules/).end().use('babel-loader').tap((options) => {return {...options,cacheDirectory: true,};});});};在build.json中注入该插件：
{// ..."plugins": ["@ali/build-plugin-faas",["build-plugin-ignore-style",{"libraryName": "antd"}],"@ali/build-plugin-ice-def","./src/index.ts"]}


推荐阅读


上一篇：十个免费开源数据备份工具，适用于Windows、MacOS、Linux

下一篇：Docker容器编排技术解析