vue首屏載入慢的解決方案

單頁面應用首次進入時載入的檔案較多，導致首屏渲染速度很慢。以下總結了一些解決單頁面應用首屏渲染慢的方式。

a）、require

/*

vue非同步元件技術 
*/,

b）、import

//

下面2行**，沒有指定webpackchunkname，每個元件打包成乙個js檔案。
const index = () => import('
@/components/index')
const about = () => import('
@/components/about
') */
//下面2行**，指定了相同的webpackchunkname，會合併打包成乙個js檔案。 把元件按組分塊
const home = () => import(/*
webpackchunkname: 'importfuncdemo' */'
@/components/home
')）

c）、require.ensure(dependencies: string, callback: function(require), chunkname: string)   多個路由指定相同的chunkname，會合併打包成乙個js檔案。

/*

元件懶載入方案三: webpack提供的require.ensure() 
*/, 

vue多入口： 

使用uglifyjsplugin 外掛程式來壓縮**和移除console。

new

webpack.optimize.uglifyjsplugin(,
sourcemap: 
false
})

首先我們要在 index.html 中, 新增 cdn 的相關**

...

在 vue.config.js 中加入 webpack 配置**

configurewebpack: ,

'jquery': 
},}

去除 vue.use() 相關**

需要注意的是，通過 cdn 引入，在使用 vuerouter vuex elementui 的時候要改下寫法。cdn會把它們掛載到window上，因此不再使用vue.use(***)

也不在需import vue from 『vue』, import vuerouter from 『vue-router』 等。

剔除全家桶和element-ui等只有，剩下的需要首次載入 vendors 就很小了。

使用 cdn 的好處有以下幾個方面

（1）加快打包速度。分離公共庫以後，每次重新打包就不會再把這些打包進 vendors 檔案中。

即在config/index.js中將productionsourcemap的值修改為false，就可以在編譯時不生成.map檔案了

moment是處理時間的標桿，但是它過於龐大，我們可以使用day.js替代。

Vue首屏載入優化

vue首屏載入優化 單頁面應用的乙個問題就是首頁載入東西過多，載入時間過長。特別在移動端，單頁面應用的首屏載入優化更是繞不開的話題。下面我會寫出我在專案中做的一些優化，希望大家能夠相互討論，共同進步。分析載入慢問題 1.webpack bundle analyzer 分析 首頁我們來看看沒有經過任何...

vue專案首次載入慢的解決方案及webpack優化

場景 後台管理系統，遇到首頁載入很慢的問題，技術棧是 vue全家桶 elementui echarts 首次載入大概需要40s，頁面才能出來。解決方案 1 vue router 路由懶載入 2 使用cdn載入首先，在index.html下引入cdn 其次，在build webpack.base.co...

selenium 頁面載入慢，超時的解決方案

開發環境 win10 64 python2.7.16 chrome77 from selenium import webdriver driver webdriver.chrome executable path chromedriver.exe driver.get http 全部載入完成超級慢的...