这段时间公司新项目立项,开发组选用 Vue2.0 进行开发。当然也就一并用到 vue cli 进行自动化构建。结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题。虽然这些问题对项目正常运行影响不大,但是却对性能影响比较大。

  1、加载图片过多,过大时,加载缓慢;  2、部署包过大,上传缓慢;

本来想偷个懒,优化的事放到以后再说,但是每次上传服务器,包太大自己都感觉不爽。所以索性先优化了再说!

1、加载图片过多,过大时,加载缓慢;

  原因:

  解决方案:

2、部署包过大,上传缓慢

  原因一:vue-cli npm run build 命令打包时默认会把 dependencies 中的依赖统一打包,这就导致打包后的 vendor.js 文件过大,从而使得首次启动时下载 vendor.js 缓慢。

  解决方案:像vue、axios、element-ui、iView 这些引入以后基本不会再进行修改的依赖可以通过cdn引入(当然前提是可以接入外网,而且网速不错),不必要打包到 vendor.js 中。具体写法如下:

  ①在项目 根目录 index.html 使用cdn节点引入各种依赖(前端所需的各种依赖安装大部分都可以在 https://cdn.bootcss.com/  上找到)

<!-- 先引入 Vue -->
<!--开发环境-->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<!--生产环境-->
<!--<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>-->
<!-- 引入axios -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 如果使用element-ui 则引入element-ui, 没找到index.min.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<!-- 如果使用iView 则引入iView-->
<script type="text/javascript" src="https://cdn.bootcss.com/iview/3.1.4/iview.min.js"></script>
<!-- 两个UI框架可以同时添加,冲突覆盖很少-->

    ②在项目 根目录 build/webpack.base.config.js 中 module.exports 内添加 externals

externals: {
'vue': 'Vue',
'axios':'axios',
'element': 'element-ui'
},

    ③在项目 根目录 src/mian.js  中将以上通过CDN已经引入的依赖 import ... from ... 删除(如:import Vue from 'vue'),若没有删除则webpack还是会把对应的依赖进行打包。

  原因二:vue-cli npm run build 命令打包时默认会生成 相对应的map文件,从而导致打包后的整个 static文件夹 过大(尤其是vendor.js.map最大),使得部署和上传缓慢。项目打包代码经过压缩加密以后,如果运行时报错,输出的错误信息根本无法精确定位是哪里的代码报错。但map文件就可以像未加密的代码一样,准确的输出是哪一行哪一列报错,这就是map文件的用处。(但是实际在项目上线之前会将所有的调试代码和日志代码全部删除,就算有map文件存在,实际上你也不知道在哪报错。除非是系统性bug导致系统卡死了,浏览器抛出错误,既然都是系统性bug了那么根本不能上线,所以map文件个人觉得没必要存在!)

    

  解决方案:将map文件干掉,当然这个干掉不是手动删除,而是在webpack打包时不产生map文件。

    在项目 根目录 config/index.js  中  build 内找到  productionSourceMap: true, 把 true改为false。从而重新打包以后,系统就不会自动生成 map文件了。

    

  

  原因三:vue-cli npm run build 命令打包时 压缩优化不彻底。这里 webpack 其实自带有一个优化打包的方法(Gzip 文件压缩),只是 vue-cli 默认没有使用。

  解决法案:①在项目 根目录config/index.js  中  build 内找到  productionGzip: false, 把 false改为true。与 productionSourceMap 刚好相反。

    

  ②安装插件 compression-webpack-plugin  注:安装的时候带上版本号,现在 compression-webpack-plugin 2.0已出,默认该命令安装最新版,最新版本和当前的webpack不匹配,要报错。

cnpm install --save-dev compression-webpack-plugin@1.1.12            //1.1最新版

  ③compression-webpack-plugin安装完成后,npm run build 执行后会发现js文件夹内每个js文件都有一个相对应的gz后缀文件,而且gz文件比相对应的js文件小很多。浏览器如果支持 g-zip 会自动查找有没有gz文件,找到了就直接加载gz文件然后本地解压并执行。

这一连串捣鼓操作完成后,再来看压缩后的两个dist文件夹,这区别那是大大的!

      

Vue -- vue-cli(vue脚手架) npm run build打包优化的更多相关文章

  1. npm run build 打包后,如何运行在本地查看效果(Nginx服务)

    这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...

  2. npm run build打包后自定义动画没有执行

    问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-load ...

  3. 关于npm run build打包后css样式中的图片失效的问题(如background)

    平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...

  4. VUE-CLI Vue安装及开发,npm run build无法查看项目的问题

    Vue-cli 本地安装vue项目 需要安装node.js,用node命令行npm的方式安装Vue 步骤: 1.进入项目地址安装 npm install vue-cli -g 2.初始化一下 ESli ...

  5. npm run build 打包后(直接打包白屏),如何运行在本地查看效果(Apache服务)

    转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端 ...

  6. npm run build 打包后,如何运行在本地查看效果(Apache服务)

    目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...

  7. npm run build 打包后,如何运行在本地查看效果

    目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...

  8. npm run build 打包后,如何查看效果

    我们用vue-cli搭建的项目执行npm build后本地打开页面空白,如果才能查看npm run build之后的结果呢 首先我们看一下提示 Tip: built files are meant t ...

  9. npm run build 打包后空白页解决问题两种情况

    问题一:assetsPublicPath配置错误 解决办法:打开config/index.js文件 build:{        // assetsPublicPath: '/'        ass ...

随机推荐

  1. .NET Core的日志[3]:将日志写入Debug窗口

    定义在NuGet包"Microsoft.Extensions.Logging.Debug"中的DebugLogger会直接调用Debug的WriteLine方法来写入分发给它的日志 ...

  2. Base64加密与MD5的区别?

    MD5是一种不可逆的摘要算法.而Base64是一种编码方式,主要用于将二进制数据转换为文本数据,方便使用HTTP协议等,是可逆的.无论多少二进制数据,在MD5算法一定的情况下,都会变成一个定长的数据, ...

  3. C# 中winform的一些属性设置

    1 窗体的大小固定住,不能调整其大小 窗体FormBorderStyle 属性设置为 FixedSingle; MaximizeBox 属性设置为false; MinimizeBox  属性设置为  ...

  4. CentOS 6.3 卷组挂载硬盘教程 linux的VPS如何分区

    XEN架构VPS提供的容量一般都不会低于10G,但大部分基于Xensystem面板的VPS默认挂载10G硬盘(第一磁盘),剩下的容量(第二磁盘)就需要通过手动挂载才能扩充默认的10G容量了.默认装完系 ...

  5. Lucene和jackson冲突

    今天在使用lucene的时候,想直接在Controller中返回json对象,于是在Spring中配置了JackSon的converter: <bean id="jacksonMess ...

  6. Servlet进阶API

    对于每个Servlet的设置信息,web容器会为其生成一个ServletConfig作为代表对象,可以从该对象取得Servlet初始参数,以及代表整个web应用程序的ServletContext对象. ...

  7. [html5] 学习笔记-应用缓存与Web workers

    1.应用缓存 HTML5引入了应用缓存程序,这意味着Web应用可进行缓存,并可在没有因特网连接时访问. 应用缓存的优势: 1)离线浏览--用户可在应用离线时使用它们 2)速度--已缓存是从本地加载,加 ...

  8. H/s:哈希率单位转换

    哈系率说明 挖矿能力是通过寻找矿工可以执行的地块的尝试次数来衡量的.每次尝试都包括创建一个唯一的块候选项,并通过SHA-256d(一种加密哈希函数)创建块候选项的摘要.或者,简而言之,哈希.由于这是一 ...

  9. Submatrix Sum

    Given an integer matrix, find a submatrix where the sum of numbers is zero. Your code should return ...

  10. Restframework 视图组件与序列号组件的应用.

    models from django.db import models # Create your models here. class Course(models.Model): title=mod ...