通常情況下通過vue cli建立的專案，webpack打包的時候會把vue, vuex, vue-router, axios等常用庫打包進去，這無疑會使打包後的體積變大。有沒有辦法不把這些依賴的庫檔案打包進去？ 我們可以厲害webpack 的配置項externals 來進行配置，不讓把這些庫檔案打包進去，而是採用cdn方式來載入這些庫檔案。
先看一下這些庫檔案打包後的bundle檔案大小：
1）vue create ***
用vue cli 新建乙個vue 工程專案
3）npm run build
編譯後，通過du -h dist/js 檢視一下編譯出的包的大小
568k dist/js 我們看到有568k大小
下面我們通過webpack配置一下externals選項，不把vue庫打包進去，再來看看打包後的檔案大小：
1）在根目錄下新建乙個vue.config.js的檔案(因為用vue cli3 版本之後新建的工程專案預設是沒有vue.config.js配置檔案的)
const vueconfig = ,
configurewebpack: ,
},chainwebpack: config =>
};module.exports = vueconfig;
上面的配置中我們只配置了vue從html 中以script方式引入。
2）在package.json中把vue的依賴刪除
"dependencies": ,
如果不在這裡載入vue庫，執行npm run serve則會報錯
uncaught referenceerror: vue is not defined
你import vue from 'vue'的時候找不到vue了。
4）最後看看不打包vue 的bundle檔案大小 du -h dist/js
164k dist/js
只有164k了。
如果我們有多個庫需要從cdn中載入則需要在/public/index.html模組中寫多個這樣的：
有沒有辦法寫成配置的方式？ 當然有。做法如下：
1）修改vue.config.js 如下：
const cdn =
const vueconfig = ,
configurewebpack: ,
},chainwebpack: config => )
}};module.exports = vueconfig;
<% for (var i in
htmlwebpackplugin.options.cdn&&htmlwebpackplugin.options.cdn.js) %>
Vue專案使用CDN優化載入
在vue專案中，引入到工程中的所有js css檔案，編譯時都會被打包進vendor.js，瀏覽器在載入該檔案之後才能開始顯示首屏。若是引入的庫眾多，那麼vendor.js檔案體積將會相當的大，影響首開的體驗。解決方法是，將引用的外部js css檔案剝離開來，不編譯到vendor.js中，而是用資源的...
Vue專案使用CDN優化載入
在vue專案中，引入到工程中的所有js css檔案，編譯時都會被打包進vendor.js，瀏覽器在載入該檔案之後才能開始顯示首屏。若是引入的庫眾多，那麼vendor.js檔案體積將會相當的大，影響首開的體驗。解決方法是，將引用的外部js css檔案剝離開來，不編譯到vendor.js中，而是用資源的...
cdn載入vue很慢 vue專案 開啟優化之旅
vue專案打包後檔案總是很大，首先得確定到底是 導致了首屏渲染如此之慢？通過查一些資料，我們從以下幾個方面去優化 開啟gzip壓縮功能 引入cdn 路由懶載入 某些第三方元件按需載入而不是全部載入 較小的資源用base64嵌入src中，減少http請求 gzip壓縮 這個是需要後端配合設定的，首先我...