?

通過 externals 加載外部 CDN 資源

默認情況下，通過?import?語法導入的第三方依賴包，最終會被打包合并到同一個文件中，從而導致打包成功后，單文件體積過大的問題。

例如上述?chunk-vendors.js?體積很大，原因是全部?import?所依賴的包進行了合并給它。

為了解決上述問題，可以通過?webpack?的?externals?節點，來配置并加載外部的?CDN?資源。凡是聲明在externals?中的第三方依賴包，都不會被打包。

具體配置代碼如下：

Javascript

config.set('externals', {vue: 'Vue','vue-router': 'VueRouter',axios: 'axios',lodash: '_',echarts: 'echarts',nprogress: 'NProgress','vue-quill-editor': 'VueQuillEditor' })

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

Code

<!-- nprogress 的樣式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> <!-- 富文本編輯器 的樣式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

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

Javascript

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script> <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script> <!-- 富文本編輯器的 js 文件 --> <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

總結

以上是生活随笔為你收集整理的前端学习（2739）：重读vue电商网站49之第三方库使用CDN的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。