vue 首次加載緩慢/刷新後加載緩慢 原因及解決方案

  • 2019 年 11 月 5 日
  • 筆記

# vue 首次加載緩慢/刷新後加載緩慢 原因及解決方案

最近做項目發現一個問題,頁面每次刷新後加載速度都非常慢,20s左右,在開發環境則非常流暢,幾乎感覺不到,本文參考望山的各種方案優化

1,關閉打包時生成的map文件

在config/index.js文件中講productionSourceMap設置為false,再次打包便沒有了map文件

2,vue-router路由懶加載

懶加載的實現方式有很多種,這裡簡單說三種實現方法

  1. vue異步組件
  2. import()

  3. webpack的require.ensure()

    vue 異步組件

    vue異步組件技術也就是異步加載,vue-router配置路由,使用veu的異步加載技術,可以實現按需加載,但是這種情況下一個組件生產一個js文件

/* vue異步組件技術 */  {    path: '/index',    name: 'index',    component: resolve => require(['@/views/index'],resolve)  }

使用import

組件懶加載方案二

  // 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。  const Home = () => import('@/components/home')  const Index = () => import('@/components/index')  // 下面2行代碼，指定了相同的webpackChunkName，會合併打包成一個js文件。 把組件按組分塊  const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')  const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')    // router  {    path: '/about',    component: About  }, {    path: '/index',    component: Index  }

webpack的require.ensure()

使用webpack的require.ensure()技術,也可以實現按需加載.這種情況下,多個路由指定相同的chunkName會合併打包成一個js文件

/* 組件懶加載方案三: webpack提供的require.ensure() */  {    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')  }

CDN引用

CDN可以減少代碼體積加快請求速度,使用CDN主要解決兩個問題,打包時間太長,打包後代碼體積太大,請求很慢,還有就是迴避服務器帶寬問題

具體步驟

<!DOCTYPE html><html>      <head>          <meta charset="utf-8">          <title>vue-manage-system</title>          <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">          <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>          <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>          <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>          <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">          <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>

如果提示Element未定義,是因為Element依賴Vue，vue.js需要在element-ui之前引入，所以vue.js也要改為cnd的引入方式.

然後,修改/build/webpack.base.conf.js中修改配置。給module.exports添加externals屬性(詳見https://webpack.docschina.org/configuration/externals/)，其中鍵是項目中引用的，值是所引用資源的名字。需要注意的是資源名需要查看所引用的JS源碼，查看其中的全局變量是什麼，例如element-ui的全局變量就說ELEMENT

module.exports = {     context: path.resolve(__dirname, '../'),     entry: {       app: './src/main.js'     },     externals: {       'vue': 'Vue',       'vue-router': 'VueRouter',       'ElementUI': 'ELEMENT',       'axios': 'axios',     }   }

然後刪除原先的import,如果不刪除原先的import，項目還是會從node_modules中引入資源。
也就是說不刪的話，npm run build時候仍會將引用的資源一起打包，生成文件會大不少。還是刪了好。

參考文章列表:感謝大神們
vue頁面首次加載緩慢原因及解決方案
vue項目實現按需加載的3種方式：vue異步組件、es提案的import()、webpack的require.ensure()

VirMach 便宜 VPS

QNews

QNews