vue 首页加载缓慢、白屏现象的原因与解决办法

vue项目打包上线后，首次打开会发现加载很慢，出现白屏的问题，

一、问题原因

打开控制台查看文件加载情况，会发现app.js/vendor.js这两个文件加载时间较长

二、解决办法

1、图片压缩

使用webpack打包文件时，可以看到图片资源显示过大，使用工具进行压缩

2、去掉.map文件

webpack打包文件时，会看到有一些.map文件生成

• 修改：
  找到config文件夹下的index.js文件，build里边的productionSourceMap值改为false即可

3、CDN外部加载

在项目开发中，会用到很多第三方库，如果可以按需引入，只需要引入自己需要的组件，减少所占空间，但是有些不能按需引入，则可以使用CDN外部加载

• 在index.html中从CDN引入组件，去掉其他页面的组件import

• 修改webpack.base.config.js,在externals中加入该组件，避免编译时找不到组件报错

4、vue路由懒加载

• 方法一：

export default new Router({
  routes: [ {
      path: '/login',
      component: resolve=>require(["@/components/pages/signIn/signIn"],resolve),
    }]
});

• 方法二：

export default new Router({
  routes: [ {
      path: '/login',
      component: ()=>import("@/components/pages/signIn/signIn"),
    }]
});

• 方法三：webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

路由index.js修改
{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}

webpack.base.conf.js修改：

5、gzip静态资源压缩，这个需要结合服务器端的配置。

查阅资料发现很多人推荐使用gzip静态资源压缩，但是这个需要结合服务器的配置

1、打开config/index.js文件：

• 这里安装时需要制定版本，要不然会报错
• npm install --save-dev [email protected]

2、然后打开/build/webpack.base.config.js文件，找到module.exports的module中的rules

• 因为vue中一些小的静态资源文件是会打包成base64的文件存在css中的或者js中，这里就是控制需要转换的大小，这样减少了js的大小。

3、服务器端(下面以Nginx为例)

• 打开配置文件,一般都会默认开启gzip的，但是gzip_static是没有开启的，所有需要加上 gzip_static on;

• 如果没有开启gzip的话可以在手动在http{}里添加

http {
    gzip on;
    gzip_static on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript         
    text/javascript text/css application/xml;
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";
}