项目性能优化UI库按需加载（打包）问题1.问题分析：

当开发的项目需要引入第三方UI组件库（antd/mint-ui/-ui）时，需要对所有组件的js和css进行打包，但项目中只用到了其中的一小部分。使用按需打包实现仅使用过的组件进行打包，从而减小打包文件的大小

1.2.解决方案：

下载bebel插件包：babel--

添加配置：babel..js

plugins: [
["component", { // 使用babel-plugin-component插件包
"libraryName": "mint-ui", // 针对特定的库
"style": true // 相关样式自动引入
}]
]

路由组件延迟加载1.问题分析：

1、Vue开发中使用路由跳转页面时，通常会注册多个路由，对应多个路由组件。

2、Vue打包后，文件很大。如果没有路由延迟加载，页面的所有文件都会一次性加载。

3、如果同时加载所有页面的文件内容，会导致首屏加载显示过慢，​​甚至白屏，导致用户体验不佳。

2. 解决方案

const Home = () => import('../pages/Home/Home.vue');
const Search = () => import('../pages/Search/Search.vue');
const CategoryList = () => import('../pages/CategoryList/CategoryList.vue');
const Recommend = () => import('../pages/Recommend/Recommend.vue');
const ShopCart = () => import('../pages/ShopCart/ShopCart.vue');
const Profile = () => import('../pages/Profile/Profile.vue');

React性能优化值e1。问题分析

1. 当组件的 props 和 state 发生变化时，e 在调用之前被调用。

2.生命周期函数必须返回一个布尔值，true表示继续更新，false表示停止本次更新sublime text 格式化，即不会创建新的虚拟DOM号进行DOM虚拟算法比较，默认值为true

2. 解决方案

1、方法一：可以在e中获取最新版本，根据实际情况判断是否需要更新。如果不是，那就是假的；

2.方法二：不意识到，但意识到

图片延迟加载1.问题分析

当项目中图片过多时，一次性加载和渲染成本较高，导致用户看到的效果有延迟。

2. 解决方案

1.npm vue-

2.声明使用：Vue.use(, {: image})

3、组件使用：

打包优化 1.优化打包文件

1. 目标：

兼容性/减少包文件/延迟加载/预加载/首屏加载优化

2、温馨提示：

2.优化包装

1. 目标：

加快打包/提升开发调试体验

2、温馨提示：

HTML 性能优化

1. HTML标签始终存在。减少浏览器决策时间

2、将标签移至HTML文件末尾，因为JS会阻塞后续页面的显示。

3. 减少使用，因为会添加http请求，导致页面无法加载。即使内容为空，加载也需要时间。

4、在能够清晰理解的基础上，简化id和class的命名。含有关键字的连接词使用“-”作为连接符号，不要使用“_”

5.保持箱体统一。统一大小写有利于浏览器缓存。虽然浏览器不区分大小写，但 w3c 标准是小写的。

6. 清理空间。虽然空格可以帮助我们查看代码，但是每个空格都相当于一个字符。空格越多，页面大小就越大。百度、百度等搜索引擎的首页已经把所有能去掉的空格和回车都去掉了。字符，可以加快网页的传输速度。可以使用DW软件批量删除html中标签之间的空格，文本中ctrl+a，然后长按shift+tab将所有内容向左对齐并清除行首的空格。

7、减少不必要的嵌套，尽量做到扁平化，因为当浏览器编译器遇到一个标签时，就开始寻找它的结束标签，直到匹配到它的内容才能显示出来，所以当嵌套页面很多时，页面打开。速度会非常慢。

8、减少评论，因为太多的评论不仅占用空间，而且如果里面有很多关键词sublime text 格式化，还会影响搜索引擎。

9、使用css+div代替表格布局，去掉:、b、i等格式控制标签，改用css控制

10. 代码应该是结构化和语义化的

11.将css和尽可能分离到单独的文件中

CSS性能优化

1、多利用继承。如果样式是多个子元素通用的，如果样式可以继承，就写在父元素上。

2. 尽量减少重画和重新排列的次数

3.选择器命名约定，通过id搜索更快

4、在动画区域中打开独立图层 1）定位：:/) Will-:xxx;

5.合并并压缩你的css文件以减少http请求。您可以使用工具或自动化构建。

6.使用CSS来操作你的图像

JS性能优化

1.合并压缩js

2.减少对DOM的操作，避免重绘和重排

3.减少请求数量，节省网络资源

4、封装功能函数，实现复用

5.避免在循环语句中定义变量

6. 谨慎使用闭包

7.功能节流、功能防抖

如有侵权请联系删除！