最近做專案發現乙個問題,頁面每次重新整理後瀏覽器載入速度都還好,但是，瀏覽器初次載入就花費了6s左右。
那麼問題來了：在開發環境中還好，但是交付給使用者之後使用者的體驗會很差，誰還會再用這個產品？在現在國內網際網路的大趨勢下，如果產品缺失了競爭力這個因素，就有可能被市場淘汰！
我有想過使用白屏的方式，可是中間載入的時間還是太長了，不滿足使用者要求，所以就在網上和各大部落格間來回查閱，找到了合適的解決方法，也總結了下面的一些方法。
1、關閉打包時生成的map檔案
在config/index.js檔案中將productionsourcemap的值設定改為false,再次打包便沒有了map檔案
2、vue-router路由懶載入
懶載入的實現方式有很多種,這裡簡單說三種實現方法
(1) vue非同步元件: import()vue(2) webpack的require.ensure()
(3)vue 非同步元件
非同步元件技術也就是非同步載入,vue-router配置路由,使用vue的非同步載入技術,可以實現按需載入,但是這種情況下乙個元件產生乙個js檔案方案一：vue非同步元件技術（require）
// 下面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
,
webpack的require.ensure()
使用webpack的require.ensure()技術,也可以實現按需載入.這種情況下,多個路由指定相同的chunkname會合併打包成乙個js檔案
,
示例
>
>
charset
="utf-8"
>
>
vue-manage-systemtitle
>
name
="viewport"
content
="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
>
vue專案首次載入緩慢優化
元件全域性引入改為按需引入 element ui按需引入 stage 2 plugins transform vue jsx transform runtime component env 根據自己已有的改 import vue from vue import from element ui vue...
瀏覽器載入過程
瀏覽器載入過程 載入過程 2.瀏覽器根據ip位址向伺服器發起http請求 包括三次握手 3.伺服器處理http請求，並返回給瀏覽器 渲染過程 1.瀏覽器根據html 生成dom樹 2.瀏覽器根據css 生成cssom 3.將dom樹和cssom整合形成render 樹 渲染樹 只有dom樹是無法渲染...
從輸入url到瀏覽器載入過程
從輸入url到頁面載入發生了什麼 最近在進行前端面試方面的一些準備，看了網上許多相關的文章，發現有乙個問題始終繞不開 在瀏覽器中輸入url到整個頁面顯示在使用者面前時這個過程中到底發生了什麼。仔細思考這個問題，發現確實很深，這個過程涉及到的東西很多。這個問題的回答真的能夠很好的考驗乙個web工程師的...