项目性能优化

UI库按需加载(打包)问题

1. 问题剖析:

当开发的项目需要引入第三方的UI组件库(antd/mint-ui/element-ui)的时, 需要会打包所有组件的js和css, 而项目中只使用了其中少部分组件. 使用按需打包实现只打包使用的组件, 从而减小打包文件大小

1.2. 解决方案:

下载bebel插件包: babel-plugin-component
添加配置: babel.config.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性能优化值 shouldComponentUpdate

1. 问题剖析

1. shouldComponentUpdate在组件的props，state发生变化的时候即将调用componentWillUpdate之前调用

2. 该生命周期函数必须返回一个布尔值，true代表继续更新，false停止本次更新，即不会创建新的虚拟DOM数去进行DOM虚拟算法比较, 而默认值是true

2. 解决方案

1. 方式一: 在shouldComponentUpdate中可以获取最新的nextProps，nextState，根据实际情况判断是否需要重新更新，如果不需要则return false;

2. 方式二: 不实现Component, 而去实现PureComponent

图片懒加载

1. 问题剖析

当一个项目图片过多的时候如果一次性加载渲染代价较大，导致用户看到的效果时间延迟

2. 解决方案

1. npm install vue-lazyload

2. 声明使用: Vue.use(VueLazyLoad, {loading: loading图片})

3. 组件使用: <img v-lazy=”item.primaryPicUrl” alt=”新品”>

Webpack打包优化

1. 优化打包文件

1. 目标:
兼容性 / 减小打包文件/ 懒加载 / 预加载 / 首屏加载优化

2. 技巧:

2. 优化打包

1. 目标:
加快打包 / 提升开发调试体验

2. 技巧:

HTML性能优化

1. HTML标签有始终。 减少浏览器的判断时间

2. 把script标签移到HTML文件末尾，因为JS会阻塞后面的页面的显示。

3. 减少iframe的使用，因为iframe会增加一条http请求，阻止页面加载，即使内容为空，加载也需要时间

4. id和class，在能看明白的基础上，简化命名，在含有关键字的连接词中连接符号用’-‘，不要用’_’

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

6. 清除空格，虽然空格有助于我们查看代码，但是每个空格相当于一个字符，空格越多，页面体积越大，像google、baidu等搜索引擎的首页去掉了所有可以去掉的空格、回车等字符，这样可以加快web页面的传输。可以借助于DW软件进行批量删除 html内标签之间空格，sublime text中ctrl+a，然后长按shift+tab全部左对齐，清除行开头的空格

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

8. 减少注释，因为过多注释不光占用空间，如果里面有大量关键词会影响搜索引擎的搜索

9. 使用css+div代替table布局，去掉格式化控制标签如：strong，b，i等，使用css控制

10. 代码要结构化、语义化

11. css和javascript尽量全部分离到单独的文件中

css性能优化

1. 多利用继承，多个子元素公用的样式，如果该样式能继承的话就写在父元素身上

2. 尽量减少重绘重排的次数

3. 选择器命名规范，通过id寻找更快

4. 动画区域开启独立的图层1） 定位： position: absolute/relative2） Will-change: xxx;

5. 合并、压缩你的css文件，减少http请求，可以借助工具或者自动化构建。

6. 使用CSS sprite来处理你的图片

JS性能优化

1. 合并压缩js

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

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

4. 封装功能函数实现复用

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

6. 慎用闭包

7. 函数节流，函数防抖