原理： 使用Webpack的externals配置，从
html的script中加载包，并且能在webpack的项目开发中像使用npm安装包一样使用import引入这个全局变量
原因：优化加载
- 通过
npm安装的包，会一起打包成vendors文件，如果安装包过多，这个文件就会很大，影响加载。而且很多通用的包有CDN，也更方便提高加载速度。 - 下图为一个基础项目的打包后文件，只装了
Vue、Element和一些基础包，就700多K，正常项目下来，vender至少1M
修改配置
1. index.html引入第三方包
<!-- 引入Vue,必须先于Element引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Element样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 修改webpack.base.conf.env
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
+ externals: {
+ 'vue': 'Vue', // key 为在项目中使用的值， value为全局下绑定的对象的key
+ 'element': 'ELEMENT'
+ }
}
3.使用
- 正常使用就行，例如
main.js
var Vue = require('vue')
var element = require('element')
import App from './App.vue'
import router from './router'
import store from './store'
Vue.use(element)
new Vue({
el: '#app',
store,
router,
render: h => h(App)
})
待填坑
- 这种方法只适用于没有使用TS的项目。如果上了TS，基本也是同样的配置，项目是可以正常启动，vscode会报找不到模块，控台出现一堆错误。等有空了再看怎么在TS中外部引入第三方库吧
