如何解决vue项目打包后文件过大问题

目录
  • 为什么打包后文件过大？
  • 如何快速解决
    • 1.路由懒加载【使用es6提案的import()方式】
    • 2.CDN引入

为什么打包后文件过大？

移动app项目，使用vue-cli脚手架搭建，UI主要运用的是Muse-UI，开发过程中为满足需求，混入Element-UI部分组件，加之团队开发，前端不止一人参与，在没有统一规范约束的情况下，编码风格和方式都很迥异和…混乱，以致依赖过多，打包时webpack把所有的库都打包在一起，所以vendor.js文件和app.js文件很大，最后出现进入首个页面时会长时间的白屏，影响用户体验。

如何快速解决

在优化复杂性项目时，只增不减可大大减少风险，bug可控，既保证项目正常运行同时减少不必要的工作量

1.路由懒加载【使用es6提案的import()方式】

这里推荐使用es提案的import()方式是因为未修改前路由定义时也时用import的方式引用，若使用vue路由懒加载组件，修改的地方较多，不够快捷。

修改后引用方式如图，即：

把import login from '@/views/login/login'修改为

const login = () => import('@/views/login/login')

其他路由配置不需要变动。

2.CDN引入

在 index.html 页面 使用cdn加载依赖

 <link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css" rel="external nofollow" >
 <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>
 <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css" rel="external nofollow" >
 <link href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow"  rel="stylesheet">
 <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
 <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script>
 <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script>
 <script src="https://cdn.bootcss.com/exif-js/2.3.0/exif.js"></script>

添加 webpack.base.conf.js 配置

  externals: {
    'element-ui': 'ELEMENT',
    'vue': 'Vue',
    'querystring':'Qs',
    'vue-router': 'VueRouter',
    'MuseUI': 'MuseUI',
    'axios':'axios',
    'jquery': "jQuery",
    "EXIF":'EXIF',
    'echarts': 'echarts'
  },

尽可能把在main.js中的引用的依赖用cdn在index.html中引用

在开源项目 CDN 加速服务中可以查找到大部分开源库的cdn

这里是不建议在优化已成型项目时直接把main.js中依赖引用部分删掉，如果删掉需要在公共JS中重新引入或者在所需依赖页面中导入，还要注意导入时定义的名称需要跟项目中已存在的依赖引用变量名一致，这将加大自己的工作量，新搭建项目或者想深入学习让代码更纯净者可以去度娘找资料研究哦

这样优化就告一段落了，打包后文件大小如下：

vendor.***文件大小从1.98M减少至342K

app.***文件大小从573K减少至53.3K

页面加载速度：

进入首个页面时长从平均13.6S减少至平均1.12S，近乎秒进。

最后对项目使用的图片素材进行压缩处理，修改config/index.js productionSourceMap: false 去除打包时生产.map文件，加快打包速度

以上是我在处理Vue项目打包后文件过大这个问题时的解决方法，希望能帮到大家，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue项目打包编译优化方案

    1. 不生成.map文件 默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件. 我们发现每个js文件都有一个相应的 .map 文件,它们仅是用来调试代码的,可以加快打包速度,但会增大打包体积,线上我们是不需要这个代码的.这里我们需要配置不生成map文件. vue-cli2 config/index.js文件中,找到 productionSourceMap: true 这一行,将 true 改为 f

  • 基于vue-cli npm run build之后vendor.js文件过大的解决方法

    问题 vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓慢的问题. 解决方案 像vue.axios.element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入,没有必要打包到vendor.js中. 1.在项目根目录index.html使用cdn节点导入 <div id="app"></div> <!-- 先引入 Vue --> <!--开发

  • 解决vue-cli脚手架打包后vendor文件过大的问题

    大家会遇到打包后文件很大,导致页面初始化加载的速度很慢.会出现白屏的现象.这一般是你打包的vendor太大的缘故.如果你打包后看到你的vendor文件有700kb以上.你就要考虑怎么处理. 处理这种文件的 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: <script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script> <script src="https:

  • 使用vue打包时vendor文件过大或者是app.js文件很大的问题

    第一次使用vue2.0开发,之前都是用的angular1.x.在使用vue-cli脚手架打包后(UI用的Element-ui),发现vendor文件很大,将近1M左右..后来翻阅资料才明白,原来webpack把所有的库都打包到了一起,导致文件很大. 我的解决办法: 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: 然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码 externals: { '

  • 如何解决vue项目打包后文件过大问题

    如何解决vue项目打包后文件过大问题

    目录 为什么打包后文件过大? 如何快速解决 1.路由懒加载[使用es6提案的import()方式] 2.CDN引入 为什么打包后文件过大? 移动app项目,使用vue-cli脚手架搭建,UI主要运用的是Muse-UI,开发过程中为满足需求,混入Element-UI部分组件,加之团队开发,前端不止一人参与,在没有统一规范约束的情况下,编码风格和方式都很迥异和…混乱,以致依赖过多,打包时webpack把所有的库都打包在一起,所以vendor.js文件和app.js文件很大,最后出现进入首个页面时会长

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • 解决Vue 项目打包后favicon无法正常显示的问题

    在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon. 如下常规配置: 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径. 项目启动后会发现该中配置方式并没有生效: 打包后的项目同样存

  • 解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

    Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最后单页面的最终文件. 问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由. 这样的话页面就是空白了,因为没有组件被添加到页面中.打开F12会看到一堆的红色failed请求.打开请求地址是这样的. 进入D盘就开始寻找static文件夹当然是找不到的.既然知道了是打包之后寻找文件

  • vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,为什么明明本地项目中有这个文件而推上去就没有了呢? 这里会先介绍.gitignore,不想看的 请直接跳过介绍 看解决办法 一..gitignore 介绍 这里向大家简述一下.gitignore这个文件 一.简绍 我们做的每个Git项目中都需要一个".gitignore"文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中.比如我们项目中的npm包

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • 解决vue项目打包上服务器显示404错误,本地没出错的问题

    1.使用脚手架搭建一个vue项目 2.运行,在本地运行没问题,接着打包上服务器,遇到404的错误,如下 这是webpack打包的结果,解决办法如下 1.修改build文件夹下的utils.js文件,大约在51行添加 publicPath:"../../" if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:&quo

  • vue项目打包后请求地址错误/打包后跨域操作

    vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '

  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    目录 一.目的 二.具体操作实现 总结 一.目的 最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创

  • 浅谈VUE项目打包后运行页面一片白问题

    目录 1.说明 2.问题说明 3.解决 3.1.index.js 3.2.utils.js 3.3.webpack.prod.conf.js 4.总结 1.说明 我们用VUE搭建一个脚手架后,在IDEA等工具中开发时,启动都没有什么问题,但是项目开发完成之后,可能需要部署上线,所以需要进行打包操作了,一般都是用下面命令进行打包: npm run build 打包过程一般没有什么问题,然后就会在工程目录下生成一个[dist]文件夹,里面就是我们打包好的文件,把这些文件部署到Nginx中或者Tomc

随机推荐