溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用 vue-cli構建的項目,在 默認情況下 ,執行 npm run build 會將所有的js代碼打包為一個整體,
打包位置是 dist/static/js/app.[contenthash].js
類似下面的路由代碼
router/index.js 路由相關信息,該路由文件引入了多個 .vue組件 import Personal from '@/components/page/Personal' import Message from '@/components/personnal/Message' import Settings from '@/components/personnal/Settings' import Setlanguage from '@/components/personnal/children/Setlanguage'
npm run build 會打包成一個app.[contenthash].js，這個文件會非常大，影響加載速度。
所以我們需要分模塊打包,把我們想要組合在一起的組件打包到一個 chunk塊中去
分模塊打包需要下面這樣使用 webpack的 require.ensure,并且在最后加入一個 chunk名,
相同 chunk名字的模塊將會打包到一起。
const Personal = r=>require.ensure([],()=>r(require('@/components/page/Personal')),'personal');
const Message = r=>require.ensure([],()=>r(require('@/components/personnal/Message')),'personal');
const Settings = r=>require.ensure([],()=>r(require('@/components/personnal/Settings')),'personal');
const Setlanguage = r=>require.ensure([],()=>r(require('@/components/personnal/children/Setlanguage')),'personal');
根據 chunname的不同, 上面的四個組件, 將會被分成3個塊打包,最終打包之后與組件相關的js文件會分為3個 (除了app.js,manifest.js, vendor.js)
總結
以上所述是小編給大家介紹的vue-cli 首屏加載優化問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
