vue-cli 首屏加載優(yōu)化問題
更新時間：2018年11月06日 17:15:52 作者：lxy3344
這篇文章主要介紹了vue-cli 首屏加載優(yōu)化問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
使用 vue-cli構(gòu)建的項(xiàng)目,在 默認(rèn)情況下 ,執(zhí)行 npm run build 會將所有的js代碼打包為一個整體,
打包位置是 dist/static/js/app.[contenthash].js
類似下面的路由代碼
router/index.js 路由相關(guān)信息,該路由文件引入了多個 .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');
根據(jù) chunname的不同, 上面的四個組件, 將會被分成3個塊打包,最終打包之后與組件相關(guān)的js文件會分為3個 (除了app.js,manifest.js, vendor.js)
總結(jié)
以上所述是小編給大家介紹的vue-cli 首屏加載優(yōu)化問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue+Openlayer使用modify修改要素的完整代碼
這篇文章主要介紹了Vue+Openlayer使用modify修改要素的完整代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
使用v-for指令的時候遇到一個錯誤問題，具體錯誤代碼在文章給大家列出，對vue v-for使用問題感興趣的朋友跟隨小編一起學(xué)習(xí)吧2019-08-08
vue實(shí)現(xiàn)同時設(shè)置多個倒計(jì)時
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)同時設(shè)置多個倒計(jì)時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue中onmounted周期里獲取不到dom的原因及分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇解決vue 引入子組件報(bào)錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動,創(chuàng)建兩個table，隱藏第一個table的body部分，這樣就能得到一個固定的head，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
vue引用BootStrap以及引用bootStrap-vue.js問題
這篇文章主要介紹了vue引用BootStrap以及引用bootStrap-vue.js問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了vue之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大，本文從環(huán)境搭建開始到測試運(yùn)行給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-11-11