解决vue app.js/vender.js过大优化启动页

更新时间：2023年10月26日 11:46:52 作者：张旭超

这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

只需要在运行打包命令的后面加上"--report"，完成以后就会跳转到127.0.0.1:8888如上界面，然后根据界面分析修改。

npm run build --report

1、路由懒加载

import Home from '@/components/Home'

修改为

const Home = () => import('@/components/Home')

2、开启gzip功能

打开/config/index.js文件

productionGzip: true,

安装

npm install --save-dev compression-webpack-plugin

如果报错

npm install --save-dev compression-webpack-plugin@1.1.11

后台也需要配置，我们后台是nginx

nginx.conf配置文件中修改

http {
    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 8;
    gzip_buffers 16 8k;
    gzip_min_length 100;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
    }

重启

systemctl reload nginx.service
   systemctl restart nginx.service

3、插件模块组件按需加载

element-ui，iView等模块用的哪个模块的时候导入

这里遇到vue-echarts插件问题，没有做路由模块懒加载的时候，只需要如下

import Echarts from 'vue-echarts'
Vue.components('chart', Echarts)

但是做了模块懒加载以后，就会报错，说是没有引入统计图的模块

作如下改动

import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/map/js/china'
...
const ECharts = () => import('vue-echarts')
Vue.component('chart', ECharts)

4、使用CDN或者static静态导入

这里使用www.jsdelivr.com CDN网站，速度快具体说明

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css" rel="external nofollow" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@3.5.4/dist/styles/iview.css" rel="external nofollow" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css" rel="external nofollow" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="external nofollow" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css" rel="external nofollow" >
    <link rel="stylesheet" href="//at.alicdn.com/t/font_946160_ugxj3soemml.css" rel="external nofollow" >
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.1/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/iview@3.5.4/dist/iview.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/locale/zh-cn.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-socket.io@3.0.7/dist/vue-socketio.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/map/js/china.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@1.1.3/dist/echarts-wordcloud.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
    <title>帮瀛</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

以上就是解决vue app.js/vender.js过大优化启动页的详细内容，更多关于vue app.js/vender.js的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue中$router.push()路由切换及如何传参和获取参数
这篇文章主要给大家介绍了关于Vue中$router.push()路由切换及如何传参和获取参数的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2023-03-03
vue-devtools的安装步骤
vue-devtools 是一款基于chrome游览器的插件，用于调试vue应用，这篇文章分步骤给大家介绍了vue-devtools的安装方法，需要的朋友参考下吧
2018-04-04
Vue使用pinia管理数据pinia持久化存储问题
这篇文章主要介绍了Vue使用pinia管理数据pinia持久化存储问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue echarts实现横向柱状图
这篇文章主要为大家详细介绍了vue echarts实现横向柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue实现添加标签demo示例代码
本篇文章主要介绍了vue实现添加标签demo示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
解决vue3使用element-ui的具体操作
elmentui是一款为vue设计的桌面组件库,下面这篇文章主要给大家介绍了关于解决vue3使用element-ui的具体操作,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue中使用axios的作用
Axios是一个功能强大、易用性高的HTTP库,适用于大多数的前端项目,它提供了丰富的功能和灵活的配置选项,可以满足不同项目的需求,这篇文章主要介绍了vue中使用axios的作用,需要的朋友可以参考下
2023-08-08
Vue3 elementUI如何修改el-date-picker默认时间
这篇文章主要介绍了Vue3 elementUI如何修改el-date-picker默认时间，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子
当我们在开发应用时经常需要对表单进行校验,以确保用户输入的数据符合预期,这篇文章主要给大家介绍了关于前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法的相关资料,需要的朋友可以参考下
2023-12-12
vue中pc移动滚动穿透问题及解决
这篇文章主要介绍了vue中pc移动滚动穿透问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07