externals 实现CDN加载

externals 实现CDN加载

方式一： 直接配置 externals

1. 首先在public/index.html 模板文件引入 script

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.26.0/dist/axios.min.js"></script>

2. 在 vue.config.js 中配置 externals

注意 Vue VueRouter Vuex 首字母大写

externals: {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios',
},

使用插件 html-webpack-externals-plugin

1. 安装插件

$ npm install html-webpack-externals-plugin --save-dev 

如果安装失败

可添加 --force 重试

$ npm install html-webpack-externals-plugin --save-dev --force

2. vue.config.js 中引用

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

3. 配置

new HtmlWebpackExternalsPlugin({
  externals: [
    {
      module: 'vue',
      entry: 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
      global: 'Vue',
    },
    {
      module: 'vue-router',
      entry: 'https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js',
      global: 'VueRouter',
    },
    {
      module: 'vuex',
      entry: 'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js',
      global: 'Vuex',
    },
    {
      module: 'axios',
      entry: 'https://cdn.jsdelivr.net/npm/axios@0.26.0/dist/axios.min.js',
      global: 'axios',
    },
  ],
})

结果

分析工具结果

使用cdn 前：

使用cdn 后