webpack 引入 CDN 加速

時間 2019-11-13

原文原文鏈接

webpack 引入 cdn 加速，用比較流行的 vue + webpack 來講明好了javascript

一、在SPA模版入口頁面，項目根目錄下的 index.html 中引入 CDN

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue + webpack + cdn</title>
</head>

<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
</body>

</html>

二、在配置文件 build/webpack.base.conf.js 中添加

module.exports = {
  ...
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex'
  }
}

簡單說明一下，externals 即爲 webpack 所依賴的外部資源聲明，鍵名爲 webpack 給外部資源所定義的內部別名alias，鍵值爲外部資源所export暴露到全局的對象名稱，好比 cdn 引入的 vue 暴露的是 Vue object，vue-router 暴露的是 VueRouter 對象，vuex 暴露的是 Vuex 對象。css

修改完成後記得從新運行 npm run dev 使得配置文件能夠生效html

三、代碼示例vue

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

....
// 代碼中使用便可

當 webpack import 依賴時的引入機制：java

一、檢查導入的依賴是不是本地模塊。若是存在，則引入，不存在，則繼續。

二、檢查導入的依賴是不是 externals 外部依賴。
   若是是，則根據模塊別名對應的外部資源對象名，從上下文中引入此對象，若是上下文中此對象不存在（好比你定義的對象
     名稱錯誤，或你沒引入 cdn 資源），則報錯依賴缺失。
   若是不是，則繼續需。

三、報錯依賴缺失。

在打包 prod 代碼時，externals 中定義的依賴會被排除打包，即使本地安裝了此模塊，也不會打包到生產代碼中，但註釋掉仍是好一些，由於一些依賴若是聲明瞭外部引入，同時又本地引入的話，可能會存在重複定義的問題（好比 vue-router）webpack

好比咱們比本已經安裝了 vue 模塊，而後又在 externals 中配置了別名爲 vue 的外部依賴，在 dev 代碼時，import Vue from 'vue' 會優先加載本地模塊，但當咱們打包 prod 代碼時，webpack 便會提高 externals 的優先級，引用 CDN 資源，而忽略本地安裝的模塊。web

並且 externals 中的鍵名做爲引入的外部依賴的別名是很靈活的，咱們只需保證引入的 CDN 資源 export 出的資源對象名正確便可，好比vue-router

// 別名隨意定義，但資源對象名必須正確
module.exports = {
  ...
  externals: {
    'myVue': 'Vue',
    'myVue-router': 'VueRouter',
    'myVuex': 'Vuex'
  }
}

import Vue from 'myVue'
import Router from 'myVue-router'
import Vuex from 'myVuex'

// 默認導入的對象也是能夠本身定義名稱
console.log(Router)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。