优化vue-cli构建的文件体积

时间:2022-10-23 16:39:17

vue-router 懒加载优化

先安装 babel 动态引入插件

npm install --save-dev babel-plugin-syntax-dynamic-import

 

修改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,
  ],
});

  

修改 .babelrc 文件

"plugins": [
  "syntax-dynamic-import"
],

 

 

 

开启gzip压缩

安装 gzip 压缩插件
npm install --save-dev compression-webpack-plugin

修改 config/index.js 文件

// ...
productionGzip: true,
// ...