webpack來打包你的vue項目,如發現你的vendor.js過大

1.如果你使用了webpack來打包你的vue項目,如發現你的vendor.js過大則可以參考本文的解決方案.

2.造成過大的原因是因為在main.js導入第三庫太多時,webpack合并js時生成了vendor.js(我們習慣把第三方庫放在vendor里面)造成的.如下圖在main.js引用element-ui等第三方庫。后果就是你的服務器端的js文件越大則用戶加載頁面的時間會越長(因為所需下載js的時間越久)

3.解決方案:采用cdn加速去從別的服務器上加載第三方庫而非自己的服務器,這樣就會快很多.并且能節省自己服務器的帶寬。

4.解決步驟:

? ?1.選用unpkg來作為第三方提供.如我想要axios包則輸入網址為?https://unpkg.com/axios/ (末尾加斜杠代表你要查詢該庫的所有版本列表).然后你可以選擇對應的版本如?https://unpkg.com/axios@0.18.0/index.js 。其中 @0.18.0為庫的版本號,若不寫則默認最新版本.

? ?2.在index.html中 將你所需的第三方庫的鏈接加載進來,如下圖:

? ?

?3.在webpack.base.conf 中添加?externals來告訴webpack我們這些第三方庫不需要打包 如下圖

4. 執行npm run build 來驗證是否減小了。效果圖如下(已經由原來的900kb減小到了130kb):

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/387063.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/387063.shtml
英文地址,請注明出處:http://en.pswp.cn/news/387063.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

TF01 簡介

總覽 如何從實體中提取特征,對于很多傳統機器學習算法的性能有巨大影響。 一旦解決了數據表達和特征提取,很多人工智能任務也就解決了90%。 對許多機器學習算法來說,特征提取不是一件簡單的事情。 深度學習解決的核心問題之一就是自動的將簡…

K8s基本概念入門

序言 沒等到風來,綿綿小雨,所以寫個隨筆,聊聊k8s的基本概念。 k8s是一個編排容器的工具,其實也是管理應用的全生命周期的一個工具,從創建應用,應用的部署,應用提供服務,擴容縮容應用…

idea出現找不到實體類

今天經理遇到一個很奇怪的問題: 在使用idea時,就是包真實存在,但是包中的實體類卻無法智能提示,也無法導入成功; 我推薦的解決辦法是重新導入,但是沒有用,經理在網上找了很多解決方式&#xff0…

TF02 入門

計算模型——圖 數據模型——張量 運行模型——會話 TensorFlow計算模型——計算圖 計算圖是TF中最基本的一個概念,TF中的所有計算都會被轉化為計算圖上的結點。 TF是一個通過計算圖的形式來表述計算的編程系統。TF中的每一個計算都是計算圖上的一個節點&#x…

ElasticSearch、Logstash和Kiabana三個開源工具。

一 方案背景 通常,日志被分散的儲存不同的設備上。如果你管理數十上百臺服務器,你還在使用依次登錄每臺機器的傳統方法查閱日志。這樣是不是感覺很繁瑣和效率低下。開源實時日志分析ELK平臺能夠完美的解決日志收集和日志檢索、分析的問題,ELK…

「一本通 6.4 例 4」曹沖養豬(CRT)

復習一下 擴展中國剩余定理 首先考慮兩個同余方程\[ x \equiv a_1\; mod\; m_1\\ x \equiv a_2\; mod\; m_2 \]化成另一個形式\[ x n_1 * m_1 a_1\\ x n_2 * m_2 a_2 \] 聯立可得\[ n_1 * m_1 a_1 n_2 * m_2 a_2\\ n_1 * m_1 - n_2 * m_2 a_2 - a_1 \]有解的前提是\[ \…

06 MapReduce工作機制

MapReduce作業的執行流程 1、提交作業 在提交JobConf對象之後,用戶程序調用JobClient的runJob方法。 runJob方法會先行調用JobSubmissionProtocol接口所定義的submitJob方法,並將作業提交給JobTracker。 緊接著,runJob不斷循環&#xff0…

solr elasticsearch比較

solr: 優點 1、Solr有一個更大、更成熟的用戶、開發和貢獻者社區。 2、支持添加多種格式的索引,如:HTML、PDF、微軟 Office 系列軟件格式以及 JSON、XML、CSV 等純文本格式。 3、Solr比較成熟、穩定。 4、不考慮建索引的同時進行搜索&#xf…

力扣(LeetCode)292. Nim游戲 巴什博奕

你和你的朋友,兩個人一起玩 Nim游戲:桌子上有一堆石頭,每次你們輪流拿掉 1 - 3 塊石頭。 拿掉最后一塊石頭的人就是獲勝者。你作為先手。 你們是聰明人,每一步都是最優解。 編寫一個函數,來判斷你是否可以在給定石頭數…

Spring Cloud應用監控與管理Actuator

由于我們把一個復雜高耦合的單體系統拆分成了多個小型服務,所以部署應用的數量在不斷增長,造成維護復雜度大大提升。所以我們需要一套自動化的監控運維機制,這套運維機制可以不間斷的獲取每個服務應用的各種指標,并根據這些指標信…

2019.04.09 電商25 結算功能1

結算功能要獲取很多數據, 現在的主要問題是要知道獲取對應的商品信息,要知道我選的是哪個的商品信息啊 它們選框的類名都一樣啊,能遍歷嗎?遍歷之后要去獲取,它父級屬性的值 有多少商品就有多少復選框,可以獲…

性能堆分析思路

1、通過top找到對應的耗費資源比較大的進程ID, 2、ps p 進程ID -L -o pcpu,pid,tid,time,tname,cmd 3、然后利用上面面命令來找到對應的線程 4、利用Listthread方法 列出所有線程,與找到對應資源比較大的匹配 5、利用stack查找到對應的堆棧調用代碼&…

第十二屆湖南省賽 (B - 有向無環圖 )(拓撲排序+思維)好題

Bobo 有一個 n 個點,m 條邊的有向無環圖(即對于任意點 v,不存在從點 v 開始、點 v 結束的路徑)。為了方便,點用 1,2,…,n 編號。 設 count(x,y) 表示點 x 到點 y 不同的路徑數量(規定 count(x,x)0&#xff…

GC 調優(實戰篇) - GC參考手冊

說明: Allocation Rate, 翻譯為分配速率, 而不是分配率; 因為不是百分比,而是單位時間內分配的量; 同理, Promotion Rate 翻譯為 提升速率; 您應該已經閱讀了前面的章節: 垃圾收集簡介 - GC參考手冊Java中的垃圾收集 - GC參考手冊GC 算法(基礎篇) - GC參考手冊GC 算法(實現篇)…

01 HTML

1.什么是HTML?(Hyper Text Markup Language:超文本標記語言)超文本:功能比普通文本更加強大標記語言:使用一組標簽對內容進行描述的一門語言(它不是編程語言)2.語法和規范?HTML文件都是以.html或者.htm結尾的,建議使用…

圖的四種最短路徑算法

本文總結了圖的幾種最短路徑算法的實現:深度或廣度優先搜索算法,弗洛伊德算法,迪杰斯特拉算法,Bellman-Ford算法 1),深度或廣度優先搜索算法(解決單源最短路徑) 從起始結點開始訪問所…