解决vue打包wendor过大的问题

1.找出原因

一般情况下不会出现过大的问题，但是，当你引入一些UI组件库的时候会导致打包文件过大的问题。所以我们需要通过外部引入的方式引入这些UI组件库，从而减少打包文件过大的问题。

2.解决方案

1.外部引入UI组件库

1.在index.html的文件头部引入element-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/[email protected]/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>

  
  

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
   
   
7
   
   
8
   
   
9
   
   
10
   
   
11
   
   
12
  
  

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

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

Vue.config.productionTip = false

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

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

  
  

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
   
   
7
   
   
8
   
   
9
   
   
10
   
   
11
   
   
12
   
   
13
   
   
14
   
   
15
  
  

3.在build\webpack.base.conf.js 中进行修改，在module.exports中添加如下内容：

externals:{
  "element-ui":"ELEMENT",
  "vue":"Vue"
},
意思为不进行打包的文件，如不设置，外部引入的内容将会被打包
  
  

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
  
  

2.代码打包成压缩包，浏览器支持自动解压的将会加载压缩包

在config\index.js 中进行修改

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


  
  

   
   
1
   
   
2
  
  

1.找出原因