java cdn加速_webpack 引入 CDN 加速

webpack 引入 cdn 加速，用比较流行的 vue + webpack 来说明好了

1、在SPA模版入口页面，项目根目录下的 index.html 中引入 CDN

2、在配置文件 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 对象。

修改完成后记得重新运行 npm run dev 使得配置文件可以生效

3、代码示例

import Vue from 'vue'

import VueRouter from 'vue-router'

import Vuex from 'vuex'

....

// 代码中使用即可

当 webpack import 依赖时的引入机制：

1、检查导入的依赖是否是本地模块。如果存在，则引入，不存在，则继续。

2、检查导入的依赖是否是 externals 外部依赖。

如果是，则根据模块别名对应的外部资源对象名，从上下文中引入此对象，如果上下文中此对象不存在(比如你定义的对象

名称错误，或你没引入 cdn 资源)，则报错依赖缺失。

如果不是，则继续需。

3、报错依赖缺失。

在打包生产代码时，externals 中定义的依赖会被排除打包，即便本地安装了此模块，也不会打包到生产代码中，所以并不需要注释各外部依赖的 import 声明。

而且 externals 中的键名作为引入的外部依赖的别名是很灵活的，我们只需保证引入的 CDN 资源 export  出的资源对象名正确即可，比如

// 别名随意定义，但资源对象名必须正确

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)