解决vue打包wendor过大的问题

版权声明:路人任意转载,注明出处即可。商业请联系我。 https://blog.csdn.net/weixin_42034412/article/details/80756318

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/element-ui@2.3.9/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>

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/>'
})

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

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

!!!需要注意的是在项目运行过程中修改会导致页面崩溃,即类似与css样式没有引入的页面效果。这时候需要重启项目了,再次打开即可正常显示。

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

config\index.js中进行修改

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

在这里需要注意的是现在下载的compression-webpack-plugin插件的版本未2.0.0,所以会出现打包出错的问题。应该怎么解决这个问题呢?

分析原因:看compression-webpack-plugin文档有说明This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.),compression-webpack-plugin需要与webpack4.X版本相结合才可以,但是我相信有很多小伙伴的webpack的版本还在3.X。所以总结出了以下两种解决办法:

  1. 升级webpack的版本到4.X
  2. 指定compression-webpack-plugin的版本compression-webpack-plugin@1.1.12

以上两种方案既可解决vue项目压缩打包失败的问题

展开阅读全文

没有更多推荐了,返回首页