总结原因
1.由于vendor.js和app.css较大，UI渲染线程并不会优先加载他俩，但是VUE等主流的单页面框架都是js渲染html body的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。
2.还有一个原因就是单页面首次会把所有界面和接口都加载出来，会有多次的请求和响应，数据不能马上加载。
解决方式
1.vue-router 路由懒加载
const HelloWorld = () => import('@/components/HelloWorld')
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
2.使用CDN加载
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>
</body>
3.防止编译文件中出现map文件
config/index.js 文件中设置 productionSourceMap 为 false
1571725304(1).jpg
4.使用gzip压缩
1).修改config/index.js 文件下 productionGzip：true ;
2).安装依赖 npm install --save-dev compression-webpack-plugin
5.去掉代码中的console.log,打包之后控制台很干净，部署正式环境之前最好这样做
在build\webpack.prod.conf.js文件下
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
})
