脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue app.js vender.js

解决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 axios每次请求添加时间戳问题

    VUE axios每次请求添加时间戳问题

    这篇文章主要介绍了VUE axios每次请求添加时间戳问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • 详解vue 祖先组件操作后代组件方法

    详解vue 祖先组件操作后代组件方法

    最近写代码遇到一问题祖先级别的组件怎么操作孙子的儿子的组件方法，在网上搜了半天都是父子传参，父子操作，晕晕乎乎的想起了bus，接下来通过本文给大家介绍vue 祖先组件操作后代组件方法,需要的朋友可以参考下
    2022-11-11
  • vue/cli3.0脚手架部署到nginx时页面空白的问题及解决

    vue/cli3.0脚手架部署到nginx时页面空白的问题及解决

    这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • VueCLI通过process.env配置环境变量的实现

    VueCLI通过process.env配置环境变量的实现

    本文主要介绍了VueCLI通过process.env配置环境变量的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 详解Vue 普通对象数据更新与 file 对象数据更新

    详解Vue 普通对象数据更新与 file 对象数据更新

    本篇文章主要介绍了详解Vue 普通对象数据更新与 file 对象数据更新 ，具有一定的参考价值，有兴趣的可以了解一下。
    2017-04-04
  • Vite+Vue3.0+ElementPlus+axios+TS搭建项目全过程

    Vite+Vue3.0+ElementPlus+axios+TS搭建项目全过程

    文章主要介绍了如何使用Vite构建项目,包括创建项目、代码规范（eslint、husky、prettti等等、EditorConfig配置等）,项目配置（CSS预处理器、样式重置、环境变量配置、axios封装、本地存储封装）和开发生产环境配置等内容
    2026-04-04
  • Vue2 Observer实例dep和闭包中dep区别详解

    Vue2 Observer实例dep和闭包中dep区别详解

    这篇文章主要为大家介绍了Vue2 Observer实例dep和闭包中dep区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • Vue项目打包部署总结篇

    Vue项目打包部署总结篇

    这篇文章主要介绍了Vue项目打包部署总结篇,关于Vue项目发布的相关问题就先总结这么多,几乎在每一步都踩过坑才有所体会,有问题欢迎各位同学一起探讨,需要的朋友可以参考下
    2024-08-08
  • Vue3结合vue-cropper实现图片裁剪预览功能

    Vue3结合vue-cropper实现图片裁剪预览功能

    ​​Vue-Cropper​​ 是一个基于 Vue.js 的图片裁剪组件库,专为 Web 应用设计,这篇文章主要为大家介绍了如何使用vue-cropper实现图片裁剪预览功能,需要的可以了解下
    2025-05-05
  • Vue中定义全局变量与常量的各种方式详解

    Vue中定义全局变量与常量的各种方式详解

    Vue.js 如何添加全局常量或变量? 这是最近一个同事问的问题，发现很多朋友对这块不熟悉，所以下面这篇文章主要给大家介绍了关于Vue中定义全局变量与常量的各种方式，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-08-08

最新评论