vue 面试题002 vue代码优化问题

文章列表

1 路由懒加载

当打包构建应用时，js包变的非常大，影响页面加载。如果我们把不同路由对于的组件分割成不同的代码块，当然当路由被访问的时候才加载对于的组件，这样就更加高效了。

具体懒加载实例：

1-1：Vue异步加载技术

{

path: '/problem', name: 'problem',

component: resolve => require(['../pages/home/problemList'], resolve)

}

1-2：ES6推荐方式imprort ()----推荐使用

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
routes: [
{
path: '/Foo',
name: 'Foo',
component: Foo
},
{
path: '/Aoo',
name: 'Aoo',
component: Aoo
}
]
})

1-3：webpack提供的require.ensure()实现懒加载

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
       require.ensure(['@/components/HelloWorld'],()=>{
           resolve(require('@/components/HelloWorld'))
       })
   }
Vue.use('Router')
export default new Router({
   routes:[{
   {path:'./',
   name:'HelloWorld',
   component:HelloWorld
   }
   }]
})

2 代码模块化

可以把常用的地方封装成单独的组件，在使用的时候在引用，不必写很多重复代码，每一个组件都有明确意义，复用性、可配置行越高越好，也包括css可通过less和sass自定义css变量来减少重复代码。

3 for 循环设置key

在使用v-for进行数据遍历渲染的时候，为每一项都设置一个key值，以便vue内部核心代码能快速查找该条数据，当新值和旧值比较的时候，可以更快的定位到diff.

WIFI共享

vue 面试题002 vue代码优化问题

相关问题

公告