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,
// ...

3、npm run build执行后会发现每个js和css文件会压缩一个gz后缀的文件夹，浏览器如果支持g-zip 会自动查找有没有gz文件 找到了就加载gz然后本地解压 执行。