# CDN
你可以通過執行`npm run preview -- --report`來分析`webpack`打包之后的結果，觀察各個靜態資源的大小。你可以發現占用空間最多的是第三方依賴。如`vue`、`element-ui`、`ECharts`等。
你可以使用`CDN`外鏈的方式引入這些第三方庫，這樣能大大增加構建的速度(通過 CDN 引入的資源不會經 webpack 打包)。如果你的項目沒有自己的`CDN`服務的話，使用一些第三方的`CDN`服務，如[unpkg](https://unpkg.com/)等是一個很好的選擇，它提供過了免費的資源加速，同時提供了緩存優化，由于你的第三方資源是在`html`中通過`script`引入的，它的緩存更新策略都是你自己手動來控制的，省去了你需要優化緩存策略功夫。
> ## TIP
>
> 很多文章說使用`CDN`引入的方式能大大減小代碼的體積，這是不可能的。雖然打包完的`bundle`小了，但那部分代碼只是被你拆出去，用`CDN`的方式引入罷了。你想減小體積，最高效的方案是啟用`GZIP`。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/cdn.html#%E6%88%91%E4%B8%AA%E4%BA%BA%E6%9A%82%E6%97%B6%E4%B8%8D%E4%BD%BF%E7%94%A8cdn%E5%BC%95%E5%85%A5%E7%AC%AC%E4%B8%89%E6%96%B9%E4%BE%9D%E8%B5%96%E7%9A%84%E5%8E%9F%E5%9B%A0%EF%BC%9A)我個人暫時不使用`CDN`引入第三方依賴的原因：
暫時構建速度還沒有遇到什么瓶頸，所有沒有必要單獨剝離部分第三方依賴。使用`CDN`引入的方式等于一些第三方依賴的版本你是通過`package.json`來控制的，一些依賴則需要手動維護，增加了一些維護成本。目前基于 webpack 的`optimization.splitChunks`已經做了資源的緩存優化，靜態資源的緩存已經做得很好了。并且目前所有的靜態資源都會上傳到自己的`CDN`服務，沒有必要使用第三方的`CDN`服務。
**當然所有的優化都是需要結合自己的具體業務來調整的！**之后可能會采用這種引入方式，或者使用`webpack dll`的方式進行優化。如果你覺得`CDN`引入對于的項目有益處，你可以遵循如下方法進行修改：
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/cdn.html#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F)使用方式
先找到`vue.config.js`， 添加`externals`讓`webpack`不打包`vue`和`element`
~~~
externals: {
vue: 'Vue',
'element-ui':'ELEMENT'
}
~~~
然后配置那些第三方資源的`CDN`，請注意先后順序。
~~~
const cdn = {
css: [
// element-ui css
'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
],
js: [
// vue must at first!
'https://unpkg.com/vue/dist/vue.js',
// element-ui js
'https://unpkg.com/element-ui/lib/index.js'
]
}
~~~
之后通過`html-webpack-plugin`注入到`index.html`之中:
~~~
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
~~~
找到`public/index.html`。通過你配置的`CND Config`依次注入 css 和 js。
~~~
<head>
<!-- 引入樣式 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>">
<% } %>
</head>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
~~~
之后還有一個小細節是如果你用了全局對象方式引入 vue，就不需要 手動 Vue.use(Vuex） ，它會自動掛載，具體見[issue](https://github.com/vuejs/vuex/issues/731)
完整的[代碼修改](https://github.com/PanJiaChen/vue-admin-template/commit/eaaa3c1ddadd114451a1a83e042f1fc56a9809a1)
最終你可以使用`npm run preview -- --report`查看效果 如圖：
> ## TIP
>
> 同理，其它第三方依賴都可以使用相同的方式處理（比如`vuex`、`vue-router`等）。當然你也可以選擇使用[DLLPlugin](https://webpack.docschina.org/plugins/dll-plugin/)的方式來處理第三方依賴，從而來優化構建。
