vue cli4 打包和載入優化

2021-10-23 14:49:39 字數 629 閱讀 5137

vue在首次載入時,會出現載入很慢的情況,可以通過優化第三方庫的引入方式來優化打包後的檔案,本文提供了兩種引入方式,對兩種方式進行了對比

結論:

npm使用方便,但載入速度稍慢,對於小的庫使用npm。

cdn+本地使用麻煩些,但載入速度快,對於一些很大的庫可以使用,但要注意庫的載入順序問題

// 安裝

npminstall echarts -s

// 使用

import echarts from 'echarts'

;

npm run build後打包檔案中chunk-vendors.js大概1.2m

npm run serve後控制台中看到chunk-vendors.js有12m

index.html中引入echarts

vue cli3打包專案

vue cli3打包專案 使用vue cli3開發好專案後,就可以將它打包,這樣就可以通過輸出檔案中的index.html來訪問該專案了。在打包專案之前需要先修改兩個檔案,分別是vue.config.js,router index.js。如果沒有vue.config.js檔案的話就需要手動建立此檔案...

vue cli2 打包全配置

vue cli2 打包全配置 將vue 全部打包分離出去 減小limit 過大的不去打包成base64 webpack.base module.exports module utils if options.extract webpack.prod output index dev various ...

vue cli3 0 打包並在本地檢視

根據以下命令對專案進行打包 npm run build命令執行完出現 done build complete.the dist directory is ready to be deployed.info check out deployment instructions at 看了一下,build...