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 } ]