vue打包生成的文件的js文件过大的优化方式
vue打包生成的js文件过大优化
1.组件按需加载
现在大多的ui库都是以组件的形式进行处理，所以只需导入需要模块的即可
2.去掉生成map文件
打包时会生成map文件，而map文件一般都比较大，可以取消生成map文件
（1）config/index.js找到productionSourceMap把true改为false
3.cdn引入
通过外部引入的方式引入这些UI组件库，从而减少打包文件过大的问题
（1）index.html
引入外部文件，并且加上<router-view>
（2）main.js
去掉在页面引入vue和vue-router
4.路由懒加载
5.代码压缩
config/index.js 找到 productionGzip 把 false 改为 true
注意：要先安装compression-webpack-plugin
npm install --save-dev compression-webpack-plugin
6.最后
优化前：
优化后：
项目打包之后js文件太大问题
问题描述
前端项目打包之后.js文件太大，导致项目第一次加载的时候太慢，查阅各种解决方案资料，汇总以下几点：
1.使用cdn引入不怎么改变的第三方库
类似于
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
webpack.base.conf.js 添加：
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'echarts': 'echarts',
'axios': 'axios'
},2.使用vue的懒加载
官网地址[https://router.vuejs.org/zh/guide/advanced/lazy-loading.html]
但是官网有一句
如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
这个插件依赖于6.x.babel 需要注意
3.服务器和前端配置开启压缩
服务器nginx配置添加:
gzip on; gzip_static on; --这个很重要 不加的话 访问加载的还是未压缩的文件
前端配置config/index.js：
productionGzip: true,
然后再引入插件 compression-webpack-plugin
需要注意版本 "compression-webpack-plugin": "^1.1.12",
前面两种 文件大小并没有减少太多 使用第三种的时候减少的最多
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vuex中Getter的基本使用教程,getter相当于Vuex中的计算属性 对 state 做处理再返回,本文通过示例代码将Getter介绍的非常详细,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了在vue里使用codemirror遇到问题，本文给大家记录下来了,需要的朋友可以参考下2018-11-11
toRaw和markRaw是Vue 3中引入的新API,用于更精细地控制对象的代理和响应性,它们提供了在需要时绕过代理或禁用响应性的能力,有助于提高性能和更好地与第三方库进行集成,本文给大家介绍Vue 3中toRaw和markRaw的使用,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vue 中可以定义组件模版的几种方式以及他们之间的一些差别，需要的朋友可以参考下2019-08-08
在分布式系统中，事务管理是一个非常重要的问题，所以本文将介绍一下Vue中如何进行分布式事务管理以及分布式事务解决方案，希望对大家有所帮助2023-06-06
这篇文章主要介绍了浅谈vant组件Picker 选择器选单选问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了Vue extends 属性的用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
关于vue3.0中的this.$router.replace({ path: ''/''})刷新无效果问题
这篇文章主要介绍了关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要为大家介绍了vuecli4配置sass与less详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Vue 组件（component）教程之实现精美的日历方法示例
组件是我们学习vue必须会的一部分，下面这篇文章主要给大家介绍了关于Vue 组件（component）教程之实现精美的日历的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
最新评论