vue项目首次打开时加载速度很慢的优化过程

{
	path: "/base/user",
	name: "user",
	component: resolve => require.ensure([], () => resolve(require('@/modules/base/user/User')), 'User'),
	meta: {
		breadcrumb: ["基本信息", "用户管理"]
	}
},
{
	path: "/base/role",
	name: "role",
	component: resolve => require.ensure([], () => resolve(require('@/modules/base/role/Role')), 'Role'),
	meta: {
		breadcrumb: ["基本信息", "角色管理"]
	}
}

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>

// import Vue from "vue";
// 引入element 组件
// import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
// import VueRouter from "vue-router";
// import Vuex from "vuex";
// Vue.use(ElementUI);
// Vue.use(VueRouter);
// Vue.use(Vuex);

npm i webpack-bundle-analyzer 
或者
cnpm i webpack-bundle-analyzer

chainWebpack(config){
	config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}

configureWebpack:{
	externals: {
      'echarts': 'echarts',
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'moment': 'moment',
      'element-ui': 'ELEMENT'
    },
}

const CompressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack:{
	plugins:[
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        // test: /\.js$|\.html$|\.json$|\.css/,
        test: /\.js$|\.json$|\.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        // deleteOriginalAssets: true // 删除原文件
      })
    ],
}

# 开启gzip。
gzip on
# 开启后如果能找到 .gz 文件，直接返回该文件，不会启用服务端压缩。
gzip_static on
# 文件大于指定 size 才压缩，以 kb 为单位。
gzip_min_length 1;
# 用于识别http协议的版本，早期的浏览器不支持gzip压缩，用户会看到乱码，所以为了支持前期版本加了此选项,目前此项基本可以忽略
gzip_http_version 1.1;
# 压缩级别，1-9，值越大压缩比越大，但更加占用 CPU，且压缩效率越来越低。
gzip_comp_level 9;
# 压缩的文件类型。
gzip_types text/css application/javascript application/json;
root /dist;

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login'),
    hidden: true
  },
 
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },
 
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
]

productionSourceMap: false,//去除.map文件

npm i uglifyjs-webpack-plugin@1.1.1 --save-dev

const isProduction = process.env.NODE_ENV === 'production';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
chainWebpack(config) {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  }