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)