vue + elementUI 项目首屏速度优化

vue+elementUI项目打包后,首页加载时间较长,有很多方面值得深入研究、优化的地方,主要从以下二个方面着手:

1,element-ui 按需引入

(1)首先执行: 

npm install babel-plugin-component -D

(2)然后在babelrc中的plugins配置:

[
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],

(3)在main.js里配置:

import { Button} from 'element-ui';

Vue.component(Button.name, Button);

 

2,vue-router 路由懒加载

(1)首先执行:

npm install babel-plugin-syntax-dynamic-import -D

(2)然后在babelrc中的plugins配置:

"syntax-dynamic-import"

(3)改写router.config.js里的路由:

const Login = () => import('./components/Login.vue');

export default [
  {
    name:'login',
    path:'/login',
    component:Login
  }
]

 

posted @ 2018-06-20 15:05  贾各布  阅读(2839)  评论(0编辑  收藏  举报