解決vue專案首頁載入過慢的情況
阿新 • • 發佈:2018-12-21
- 什麼導致了首頁初步載入過慢
請看下面一張圖就清楚了
即app.js檔案過大導致的。。。 - 如何來處理
vue-route 懶載入
component: resolve => require([''],resolve)
- 在webpack打包的過程中,將多餘檔案去掉,如map檔案
即在config/index.js中將productionSourceMap的值修改為false,就可以在編譯時不生成.map檔案了
- cdn
在專案開發中,我們會用到很多第三方庫,如果可以按需引入,我們可以只引入自己需要的元件,來減少所佔空間,但也會有一些不能按需引入,我們可以採用CDN外部載入,在index.html中從CDN引入元件,去掉其他頁面的元件import,修改webpack.base.config.js,在externals中加入該元件,這是為了避免編譯時找不到元件報錯。 - vue 非同步載入
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檔案。
{ 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.prod.conf.js中修改下一些檔案
寫的可能不全,希望大家能多提提意見。。。