方式一：外部扩展【externals】
基于webpack提供的externals，可以从输出的 bundle 中排除依赖，减少build打包后的Vendor文件的大小。具体实现思路如下：
1.webpack.common.js或vue.config.js中添加externals：
externals为webpack的一个配置项目，支持webpack 4.0+,webpack5.0+
其他的配置可参考官网，官网地址：https://webpack.docschina.org/configuration/externals#root
配置externals
externals: {
vue: 'Vue',
},
注意：Vue是外部库提供的是全局变量，如果vue提供的全局变量是Vue，那你就得使用Vue。
2.模板（.html或.ejs）文件中加引入的cdn资源地址。
引入外部地址
<script src="https://cdn.finchina.com/app/app_dependent_file/vue/2.6.9/vue.min.js"></script>
以上，我们就实现了webpack的外部资源的引入，但是如果有多个html文件，那么每一个都需要手动的引入资源，当我们添加fastclick-hvue
// webpack
externals: {
vue: 'Vue',
factclick: 'FastClick',
}
//html
<script src="https://cdn.finchina.com/app/app_dependent_file/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.finchina.com/app/app_dependent_file/fastclick/1.0.6/fastclick.js"></script>
从上面的代码可以看出，每添加一个依赖文件，对应的html就要添加引入。
方式二：html-webpack-externals-plugin
首先安装html-webpack-externals-plugin：
// npm
npm i html-webpack-externals-plugin -D
// yarn
yarn add html-webpack-externals-plugin -D
在我们常用的webpack.base.conf.js中的进行配置，我们以CDN引入vue框架为例，让其不打包到vendor.js中，在webpack.base.conf.js的配置如下：
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
module.exports = {
plugins: [
new HtmlWebpackExternalsPlugin({
externals: [{
module: 'vue',
entry: 'https://cdn.finchina.com/app/app_dependent_file/vue/2.6.9/vue.min.js',
global: 'Vue'
}]
})
],
}
最后看到在index.html中动态添加了如下代码：
<script type="text/javascript" src="https://cdn.finchina.com/app/app_dependent_file/vue/2.6.9/vue.min.js"></script>
方式三：外部扩展【externals】 + html-webpack-externals-plugin
混合app项目在打包时后会产生多入口html，每个页面为一个独立的项目，这时候就需要结合使用
-
html-webpack-externals-plugin配置通用的资源，例如Vue、normalize、FastClick、zepto等。 -
externals配置项目内需要引入的资源，例如echarts、dayjs等
注意，测试发现
externals引入的资源会优先于html-webpack-externals-plugin加载，所以当使用第三方资源需要依赖其他资源时（vantUI依赖于Vue，Vue后加载会出现报错），可以在script标签内添加defer
<script src="https://cdn.finchina.com/app/app_dependent_file/vant/2.10.6/vant.min.js" defer></script>
