vue-router 懒加载优化
Posted goloving
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-router 懒加载优化相关的知识，希望对你有一定的参考价值。
一、路由懒加载
1、先安装 babel 动态引入插件
npm install --save-dev babel-plugin-syntax-dynamic-import
2、修改router/index.js
异步引入组件
import Vue from ‘vue‘;
import Router from ‘vue-router‘;
const index = () => import(‘@/pages-phone/index‘);
const LOG = [
{
path: ‘/index‘,
name: ‘index‘,
component: index,
},
];
Vue.use(Router);
export default new Router({
routes: [
...LOG,
],
});
3、修改 .babelrc 文件
"plugins": [
"syntax-dynamic-import"
],
二、开启gzip压缩
1、安装 gzip 压缩插件
npm install --save-dev compression-webpack-plugin
2、修改 config/index.js 文件
// ...
productionGzip: true,
// ...
以上是关于vue-router 懒加载优化的主要内容，如果未能解决你的问题，请参考以下文章