Vue项目优化(持续更新)

1.UI库使用按需加载/打包
下载bebel插件包: bebel-plugin-component
2. 路由组件的懒加载

const Home = ()=> import('../Home/Home.vue')

3.图片懒加载

// 引入依赖包
npm install vue-lazyload
// 声明使用
Vue.use(VueLazyLoad,{loading:loading图片})
// 组件使用
<img v-lazy="item.primaryPicUrl" alt="新品">

4.webpack打包优化
目标:
兼容性/减少打包文件/懒加载/预加载/首页加载优化
技巧:

5.HTML性能优化
( a ).标签有始有终,减少浏览器判断处理事件.
( b ).清除空格,空格相当于字符.
( c ).减少不必要的嵌套,尽量扁平化.
( d ).减少注释,过多注释不仅占用空间,还影响搜索引擎搜索
( e ).代码要结构化 语义化

6.CSS性能优化
( a ).多利用继承
( b ).选择器命名规范,通过id查询更快
( c ).使用Css sprite 处理图片
( d ).合并 压缩css文件

7.JavaScript性能优化
( a ).合并压缩js
( b ).减少对Dom的操作,减少重绘重排
( c ).减少请求个数,节省网络资源
( d ).封装功能函数实现复用
( e ).函数节流/防抖

8.Vue性能优化
( a ).Vue中组件尽量不全局引入