vue打包生成的文件的js文件过大的优化方式

更新时间：2022年04月13日 11:30:17 作者：那谁家的菇凉

这篇文章主要介绍了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",

前面两种文件大小并没有减少太多使用第三种的时候减少的最多

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

VUE的数据代理与事件详解
这篇文章主要为大家介绍了VUE的数据代理与事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
2021-11-11
vue3中如何使用vue-types
vue-types 在 Vue 3 中的使用主要适用于希望进行更细致的 prop 验证的场景,尤其是在 JavaScript 项目中,这篇文章给大家介绍vue3中如何使用vue-types,感兴趣的朋友跟随小编一起看看吧
2024-04-04
vue跳转页面常用的4种方法与区别小结
这篇文章主要给大家介绍了关于vue跳转页面常用的4种方法与区别,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
Vue+Node.js+WebSocket实现即时通讯
本文主要介绍了Vue+Node.js+WebSocket实现即时通讯，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
vue-route路由管理的安装与配置方法
这篇文章主要介绍了vue-route路由管理的安装与配置,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-07-07
Vue.js获取被选择的option的value和text值方法
今天小编就为大家分享一篇Vue.js获取被选择的option的value和text值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue使用echarts实现水平柱形图实例
这篇文章主要介绍了vue使用echarts实现水平柱形图实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue项目中的遇错:Invalid Host header问题
这篇文章主要介绍了vue项目中的遇错:Invalid Host header问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue-dialog的弹出层组件
这篇文章主要为大家详细介绍了vue-dialog的弹出层组件，可以通过npm引用的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Vue3安装dataV报错问题解决方案
这篇文章主要给大家介绍了关于Vue3安装dataV报错问题解决方案的相关资料,dataV用于大屏展示,个人觉得比echarts简单很多,需要的朋友可以参考下
2023-06-06