vue避免不了的問題 首屏載入優化

2021-09-02 07:16:47 字數 1337 閱讀 4762

1.使用webpack的externals優化

在webpack.base.conf.js中新增：

externals:
在index.html中新增cdn鏈結

src=


"">


script


>


src=


"">


script


>


src=


"">


script


>


src=


"">


script


>
可減小主js檔案的體積（外鏈檔案多大就可以減少多大的體積，但也會增加外鏈載入時間，最好對比一下是否在載入時間上有所提公升再進行外鏈插入）

2.路由懶載入（按需載入）

前：

import myservicewrap  from


'@/page/center/myservice/myservicewrap'
後：

const


myservicewrap=(


)=>


import


('@/page/center/myservice/myservicewrap'


)
3.gzip壓縮

config/index.js檔案：

//在build裡有則修改無則新增


productiongzip:


true


,productiongzipextensions:


['js'


,'css'


]
build/webpack.prod.conf.js檔案：

外掛程式compression-webpack-plugin使用：

//在build裡有則修改無則新增


if(config.build.productiongzip)))


}

檔案路徑：nginx -> conf -> nginx.conf

http:
主要是：gzip on; 和 gzip_types （配置了gzip感覺速度翻了好幾倍，載入檔案減小5倍及以上，就這個feel倍兒爽）

4.不生成.map(無速度優化，可以減少上傳伺服器的檔案體積)

.map作用

在打包出錯時，會告訴你具體錯誤位置

去除.map

在config/index.js中把build中的productionsourcemap改為false

vue的scope導致樣式修改不了問題

如果你在用vue開發，你一定用過它css的scoped屬性，你會發現當你新增scope屬性以後，有時候修改樣式變得很費勁有木有？這裡先說一下scoped的原理 再新增scoped以後，大致可以看成做了兩步操作 給html的dom節點加乙個不重複data屬性 形如 data 來表示他的唯一性 在每句c...

Rarfile解壓不了的問題

最近用python呼叫rarfile進行解壓rar壓縮包時，報了如下錯誤 rarfile.rarcannotexec unrar not installed?rarfile.unrar tool unrar 結合本人c 呼叫rar.exe的經驗 rar壓縮包的演算法並不對外公開，所以其它軟體想壓縮或...

Rarfile解壓不了的問題

最近用python呼叫rarfile進行解壓rar壓縮包時，報了如下錯誤 rarfile.rarcannotexec unrar not installed?rarfile.unrar tool unrar 結合本人c 呼叫rar.exe的經驗 rar壓縮包的演算法並不對外公開，所以其它軟體想壓縮或...