目錄

• 一、為開發模式與釋出模式指定不同的打包入口
• 二、通過externals載入外部CDN資源
• 三、通過CDN優化ElementUI的打包
• 四、首頁內容定製
• 五、使用路由懶載入

一、為開發模式與釋出模式指定不同的打包入口

ui建立的專案，隱藏了webpack配置，可以在src根目錄新建一個vue.config.配置檔案。在配置檔案中向外匯出配置物件。

2.預設情況下，vue專案的開發模式和釋出模式，共用一個打包的入口檔案即（src/main.js）。可以使用configureWebpack或chainWebpack來定義webpack的打包配置

把main.js檔案改為mahttp://www.cppcns.com

二、通過externals載入外部CDN資源

預設情況下，通過import語法匯入的第三方依賴包，最終會被打包合併到同一個檔案中，從而導致打包成功後，單檔案體積過大的問題（我們import進的樣式表，也會打包到同一個檔案中，導致檔案過大） 。

為了解決上述問題，可以通過webpack的externals節點，來配置並載入外部的CDN資源。凡是宣告在externals中的第三方依賴包，都不會被打包合併到最終的檔案中去。

① 配置webpack的externals節點，在釋出階段配置

宣告在bLmRwuHFexternals中的第三方依賴包，都不會被打包，專案會在用到依賴包時在window全域性中去查詢對應的物件。所以需要在index.html檔案中引入CDN中的js和css資源,以便可以在全域性中找到

需要在public/index.html檔案的頭部，新增如下的CDN資源引用：

具體操作流程：
① 在 main-prod.js 中，註釋掉nprogress和quill引用的css檔案
② 在 index.html 的頭部區域中，通過 CDN 載入nprogress和quill 的 js 和 css 樣式
③ 在 index.html 的頭部區域中，通過 CDN 載入其餘依賴的js

可以通過staticfile CDN來查詢到對應的開源庫

使用CDN之前的檔案www.cppcns.com大小：

使用CDN之後的檔案大小：

三、通過CDN優化ElementUI的打包

雖然在開發階段，我們啟用了 element-ui 元件的按需載入，儘可能的減少了打包的體積，但是那些被按需加
載的元件，還是佔用了較大的檔案體積。此時，我們可以將 element-ui 中的元件，也通過 CDN 的形式來加
載，這樣能夠進一步減小打包後的檔案體積

具體操作流程如下：
① 在 main-prod.js 中，註釋掉 element-ui 按需載入的程式碼
② 在 index.html 的頭部區域中，通過 CDN 載入 elementhttp://www.cppcns.com-ui 的 js 和 css 樣式

完成後的檔案大小：

四、首頁內容定製

① 不同的打包環境下，首頁內容可能會有所不同。我們可以通過外掛的方式進行定製，外掛配置如下：

 // 通過plugin('html')：找到html外掛。 通過tap()：可以修改這個外掛裡面的固定配置項
 // 通過args：可以拿到當前這個外掛的一些相關引數。
  // 在args[0]中新增自定義的屬性isprod,當在開發階段時，賦值為true，釋出階段時，賦值為false

② 在public/index.html首頁中，可以根據isProd的值，開決定如何渲染頁面結構

五、使用路由懶載入

當打包構建專案時，所有路由對應的元件都會打包到一個檔案中，導致檔案過大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。

到此這篇關於vue專案完成後如何實現專案優化的示例的文章就介紹到這了,更多相關vue專案優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！