vue減少打包檔案大小

2021-09-11 21:16:46 字數 1023 閱讀 3338

第一次使用vue2.0開發,之前都是用的angular1.x。在使用vue-cli腳手架打包後(ui用的element-ui),發現vendor檔案很大,將近1m左右。。後來翻閱資料才明白,原來webpack把所有的庫都打包到了一起,導致檔案很大。

我的解決辦法:

1、把不常改變的庫放到index.html中,通過cdn引入,比如下面這樣:

然後找到build/webpack.base.conf.js檔案,在 module.exports = 中新增以下**

externals: ,

然後你打包就會發現vendor檔案小了很多~

如果你還不滿足,請接著往下看·····

2、vue路由的懶載入(具體作用,官網檢視哦,這裡就不多介紹了)。

剛開始我們使用路由可能是下面這樣(router.js),這樣一開始進入頁面就會把所有的路由資源都載入,如果專案大,載入的內容就會很多,等待的時間頁就會越長,導致給使用者的不好的體驗效果。

為了把路由分模組,然後每次進入乙個新頁面才載入該頁面所需要的資源(也就是非同步載入路由),我們可以像下面這樣使用(router.js):

這裡我沒有生成map檔案,這樣打包速度快一些,整個專案檔案也小很多(map檔案一般都很大);

取消生成map檔案,找到config/index.js ,修改下面箭頭指向為false,就行了。

解壓與打包 檢視檔案大小

九,打包 壓縮與解壓縮 由於這是每乙個linux使用者都會經常用到的基本功能,因此我們將介紹最常見到的打包 壓縮和解壓縮程式。1,打包檔案的tar命令 tar命令位於 bin目錄中,它能將使用者所指定的檔案或目錄打包成乙個檔案,不過它並不做壓縮。一般unix上常用的壓縮方式是先用tar命令將許多檔案...

刪除vue打包大小限制 vue 打包優化大小

yarn run build report file size gzipped dist js chunk vendors.df6b5bce.js 141.57 kib 49.51 kib 以上命令,build 後會生成report.html,該檔案顯示引用的依賴包大小。image.png 主要為v...

檔案大小換算

1千吉位元組 tb,terabyte 1024吉位元組 2的40次方位元組 1tb 1024gb 1吉位元組 gb,gigabyte 1024兆位元組 2的30次方位元組 1gb 1024mb 1兆位元組 mb,megabyte 1024千位元組 2的20次方位元組 1mb 1024kb 1千位元組...