路由模式错误

将路由模式mode设置成了history,默认hash;将其修改为hash

dist文件引用路径错误

打包后dist目录下文件的引用路径不对,因找不到文件而报错白屏

修改config下index.js模块的导出路径

浏览器不支持es6

由于使用了es6语法,但浏览器不支持造成编译错误无法解析而白屏

安装Babel,会把这些语法转化为较低版本的代码 npm install --save-dev @babel/core @babel/cli @babel/preset-env

加载文件资源过大

单页面的html是靠js加载的,当首屏加载的js文件很大时,会造成一定程度的白屏

采用路由懒加载

// 1、Vue异步组件技术：
{
  path: '/home',
  name: 'Home',
  component: resolve => require(['../views/home.vue'], resolve)
}
 
// 2、es6提案的import()
{
  path: '/',
  name: 'home',
  component: () => import('../views/home.vue')
}
 
// 3、webpack提供的require.ensure()
{
  path: '/home',
  name: 'Home',
  component: r => require.ensure([],() =>  r(require('../views/home.vue')), 'home')
}

组件懒加载

// import 方式
components:{
  "dailyModal":()=>import("./dailyModal.vue")
},
// require 方式
components:{
  "dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},

CDN 资源优化

CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。
随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。此时我们可以使用 CDN 的方法，优化网络加载速度

解决方案

将 vue、vue-router、vuex、axios 这些 vue 全家桶的资源，全部改为通过 CDN 链接获取，在 index.html 里插入相应链接。

<body>
  <div id="app"></div>
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
      <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
      <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
     <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
     <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>
12345678

在 vue.config.js 配置 externals 属性

module.exports = {
 ···
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios':'axios'
    }
}

卸载相关依赖的 npm 包

npm uninstall  vue vue-router vuex axios

gZip 加速优化

解决方案

所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。
gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
      new CompressionPlugin({
        // gzip压缩配置
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10kb的数据进行压缩
        deleteOriginalAssets: false, // 是否删除原文件
      })
    )
  }
}