减小Vue打包体积

之前写过一篇《VueRouter懒加载》,就是解决加载过慢,这次是优化一下体积。

我这里引用了Element组件库,现在需要用外部引用方式来引用:

index.html的文件头部引入Vueelement-ui的组件库

引入vue
<!-- 开发版,开发过程中使用此方案-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产版,打包的时候使用此方案 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

引入element-ui
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>

main.js 中进行修改如下所示

//需要注释掉全局本地引入的vue
// import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

//在外部引入的element-ui的为ELEMENT,如此写即可
Vue.use(ELEMENT);               

build\webpack.base.conf.js 中进行修改,在module.exports中添加如下内容,不进行打包的文件,如不设置,外部引入的内容将会被打包

externals:{
  "element-ui":"ELEMENT",
  "vue":"Vue"
}

config\index.js 中进行修改

//需要下载相应的包 npm install --save-dev compression-webpack-plugin
productionGzip: true,  

标签: VUE

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

添加新评论