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]\.";
}