使用CDN引入组件库 减少编译后js文件大小

1
2
3
4
5
6
7
8
9
10
11
12
// 在 Webpack 中配置 externals
// 此处以 vue.config.js 为例
module.exports = {
  configureWebpack: config => {
    config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'axios': 'axios'
    }
  }
}
1
2
3
4
5
6
<!-- 在 public/index.html 中直接引用cdn资源 -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<!-- built files will be auto injected -->