webpack 引入 CDN 加速

最新推荐文章于 2024-05-14 18:20:24 发布

weixin_34357887

最新推荐文章于 2024-05-14 18:20:24 发布

阅读量3.4k

点赞数 1

文章标签： webpack javascript python ViewUI

原文链接：https://my.oschina.net/sallency/blog/2353892

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

1、在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>

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、报错依赖缺失。

在打包 prod 代码时，externals 中定义的依赖会被排除打包，即便本地安装了此模块，也不会打包到生产代码中，但注释掉还是好一些，因为一些依赖如果声明了外部引入，同时又本地引入的话，可能会存在重复定义的问题（比如 vue-router）

比如我们比本已经安装了 vue 模块，然后又在 externals 中配置了别名为 vue 的外部依赖，在 dev 代码时，import Vue from 'vue' 会优先加载本地模块，但当我们打包 prod 代码时，webpack 便会提升 externals 的优先级，引用 CDN 资源，而忽略本地安装的模块。

而且 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)

转载于:https://my.oschina.net/sallency/blog/2353892