一、為開發(fā)模式與發(fā)布模式指定不同的打包入口

vue ui創(chuàng)建的項目，隱藏了webpack配置，可以在src根目錄新建一個vue.config.js配置文件。在配置文件中向外導(dǎo)出配置對象。

2.默認情況下，vue項目的開發(fā)模式和發(fā)布模式，共用一個打包的入口文件即（src/main.js）?？梢允褂胏onfigureWebpack或chainWebpack來定義webpack的打包配置

把main.js文件改為main-dev.js。 復(fù)制一份main.js改為main-prod.js

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

默認情況下，通過import語法導(dǎo)入的第三方依賴包，最終會被打包合并到同一個文件中，從而導(dǎo)致打包成功后，單文件體積過大的問題（我們import進的css樣式表，也會打包到同一個文件中，導(dǎo)致文件過大） 。

為了解決上述問題，可以通過webpack的externals節(jié)點，來配置并加載外部的CDN資源。凡是聲明在externals中的第三方依賴包，都不會被打包合并到最終的文件中去。

① 配置webpack的externals節(jié)點，在發(fā)布階段配置

聲明在externals中的第三方依賴包，都不會被打包，項目會在用到依賴包時在window全局中去查找對應(yīng)的對象。所以需要在index.html文件中引入CDN中的js和css資源,以便可以在全局中找到

需要在public/index.html文件的頭部，添加如下的CDN資源引用：

具體操作流程：
① 在 main-prod.js 中，注釋掉nprogress和quill引用的css文件
② 在 index.html 的頭部區(qū)域中，通過 CDN 加載nprogress和quill 的 js 和 css 樣式
③ 在 index.html 的頭部區(qū)域中，通過 CDN 加載其余依賴的js

可以通過staticfile CDN來查找到對應(yīng)的開源庫

使用CDN之前的文件大小：

使用CDN之后的文件大?。?br />

三、通過CDN優(yōu)化ElementUI的打包

雖然在開發(fā)階段，我們啟用了 element-ui 組件的按需加載，盡可能的減少了打包的體積，但是那些被按需加
載的組件，還是占用了較大的文件體積。此時，我們可以將 element-ui 中的組件，也通過 CDN 的形式來加
載，這樣能夠進一步減小打包后的文件體積

具體操作流程如下：
① 在 main-prod.js 中，注釋掉 element-ui 按需加載的代碼
② 在 index.html 的頭部區(qū)域中，通過 CDN 加載 element-ui 的 js 和 css 樣式

完成后的文件大?。?br />

四、首頁內(nèi)容定制

① 不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同。我們可以通過插件的方式進行定制，插件配置如下：

 // 通過plugin('html')：找到html插件。 通過tap()：可以修改這個插件里面的固定配置項
 // 通過args：可以拿到當前這個插件的一些相關(guān)參數(shù)。
  // 在args[0]中添加自定義的屬性isprod,當在開發(fā)階段時，賦值為true，發(fā)布階段時，賦值為false

② 在public/index.html首頁中，可以根據(jù)isProd的值，開決定如何渲染頁面結(jié)構(gòu)

五、使用路由懶加載

當打包構(gòu)建項目時，所有路由對應(yīng)的組件都會打包到一個文件中，導(dǎo)致文件過大，影響頁面加載。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應(yīng)組件，這樣就更加高效了。

到此這篇關(guān)于vue項目完成后如何實現(xiàn)項目優(yōu)化的示例的文章就介紹到這了,更多相關(guān)vue項目優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論