鍍金池/ 問答/HTML/ vue.js項(xiàng)目懶加載(異步加載)還是有個(gè)別文件體積非常大,該怎么配置呢?

vue.js項(xiàng)目懶加載(異步加載)還是有個(gè)別文件體積非常大,該怎么配置呢?

我的項(xiàng)目結(jié)構(gòu)大致如下:
假設(shè)我有 40條路由,對(duì)應(yīng)40個(gè)組件,除了index、login兩條路由,其他全部被包含到另一個(gè)路由/admin/的子路由(或子路由的子路由)里面了。

我嘗試了一下,這個(gè)按需加載還是不太理想,沒有設(shè)置異步加載之前,打包后,app.xxx.js的體積 為3mb,當(dāng)我將Index路由對(duì)應(yīng)的組件分開打包時(shí),app.xxx.js只有2.4mb了,然后多了一個(gè)'600kb'左右的'1-xxxxx.js',隨后我將所有的路由全部使用異步加載的方式來設(shè)置,發(fā)現(xiàn)多了很多js文件,但是app.xxxx.js的體積并沒有減小,反而增大了;

還有一個(gè)問題是,我index頁(yè)面的路由js文件雖然分開了,但是里面用到一個(gè)公共組件,所以在請(qǐng)求首頁(yè)的時(shí)候,請(qǐng)求中除了index對(duì)應(yīng)的js文件,還把另外一個(gè) 2.4mb 左右的文件給下載下來了,這可能是因?yàn)楣步M件被打包到另外一個(gè)js文件的緣故吧?

那么,異步路由該怎么配置呢?或者配置的思路是什么呢?

假設(shè)我的項(xiàng)目結(jié)構(gòu)如下:

假設(shè)我有 40條路由,對(duì)應(yīng)40個(gè)組件,還有其他公共組件(10個(gè)左右,在一個(gè)文件夾里面);
除了index、login兩條路由,其他全部被包含到另一個(gè)路由/admin/的子路由(或子路由的子路由)里面了。

回答
編輯回答
九年囚

根據(jù)你的描述,app.xxx.js 的大小達(dá)到了3MB

即使項(xiàng)目規(guī)模非常的大,也不應(yīng)該出現(xiàn)這種情況。感覺你打包的時(shí)候,代碼拆分做的不好。
如果你打包使用的 webpack 可以參考這里 代碼分離

路由異步加載只是讓 app.xxx.js 體積縮小的其中一種方案,主要是代碼分離。

2018年8月6日 19:46