vue webpackでelementuiがcdnを使用して導入
4683 ワード
vue webpackでelementuiがcdnを使用して導入
Webpack 4にはsplitChunksがパッケージ化されており、サードパーティ製のパッケージをブロックすることができ、Webpack 3用cdnでvendorを小さくすることができる.jsのサイズ; index.html
vueを導入してからelementuiを導入する必要があります webpack.base.conf.js
ネット上では「element-ui」のvalueをELEMENTに変更する必要があると言われていますが、試してみると、どちらでもいいようです. main.js
入口ファイルではvueはそのままimport、elementuiはimportを使わずに直接使用でき、パッケージされたvendor.jsはずっと小さいです.
サンプルアイテムhttps://github.com/Zillionnn/vue-cdn.git
Webpack 4にはsplitChunksがパッケージ化されており、サードパーティ製のパッケージをブロックすることができ、Webpack 3用cdnでvendorを小さくすることができる.jsのサイズ;
vueを導入してからelementuiを導入する必要があります
<head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
...
head>
...
<body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">script>
<script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js">script>
<div id="app">div>
body>
ネット上では「element-ui」のvalueをELEMENTに変更する必要があると言われていますが、試してみると、どちらでもいいようです.
...
externals: {
'vue': 'Vue',
// 'element-ui': 'ElEMENT',
'element-ui': 'ElementUI',
}
...
入口ファイルではvueはそのままimport、elementuiはimportを使わずに直接使用でき、パッケージされたvendor.jsはずっと小さいです.
import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
サンプルアイテムhttps://github.com/Zillionnn/vue-cdn.git