vue白屏或加载慢_Vue首屏加载慢的优化方案

使用vue构建项目首屏加载时，出现加载慢，白屏的问题解决方案：

步骤一 webpack来打包vue项目，vendor.js过大问题解决

1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用了一些第三方库。导致了你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载js的时间越久)

首先在index.html中，使用CDN的资源，复制以下bootstrap的链接资源：

2.在bulid/webpack.base.conf.js文件中，添加externals，导入index.html下所需的资源模块：

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: ['babel-polyfill', 'lib-flexible', './src/main.js']

},

externals: { //

vue: 'Vue',

vuex: 'Vuex',

'vue-router': 'VueRouter',

VueAwesomeSwiper: 'VueAwesomeSwiper'

},

3.在main.js里将以下 import 注释 替换 require 引入模块

// import Vue from 'vue'

// im