原理： 使用Webpack的externals配置，從
html的script中加載包，并且能在webpack的項(xiàng)目開發(fā)中像使用npm安裝包一樣使用import引入這個(gè)全局變量
原因：優(yōu)化加載
- 通過
npm安裝的包，會(huì)一起打包成vendors文件，如果安裝包過多，這個(gè)文件就會(huì)很大，影響加載。而且很多通用的包有CDN，也更方便提高加載速度。 - 下圖為一個(gè)基礎(chǔ)項(xiàng)目的打包后文件，只裝了
Vue、Element和一些基礎(chǔ)包，就700多K，正常項(xiàng)目下來，vender至少1M
修改配置
1. index.html引入第三方包
<!-- 引入Vue,必須先于Element引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Element樣式 -->
<link rel="stylesheet" >
<!-- 引入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 為在項(xiàng)目中使用的值， value為全局下綁定的對(duì)象的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的項(xiàng)目。如果上了TS，基本也是同樣的配置，項(xiàng)目是可以正常啟動(dòng)，vscode會(huì)報(bào)找不到模塊，控臺(tái)出現(xiàn)一堆錯(cuò)誤。等有空了再看怎么在TS中外部引入第三方庫吧
