1.昨天看到自己的项目每次打包后都是30M左右，就觉得这个打包后的dist文件太大了，能不能小点呢，

然后就看网上的资料，提供了好多优化的办法，但是我只用了一个，后期再不断的优化吧。

打开工程项目文件夹。找到config文件夹 ----> 打开index.js文件,

 1 module.exports ={

 2    dev:{

 3

 4         .....

 5     }  ,

 6

 7     build:{

 8        productionSourceMap : false,

 9        .....

10     }

11

12

13 }

就修改这么一个属性，然后打包npm run build ,突然发现竟然就能比之前的文件小一半，直接从30M左右降到了14M左右。

这个属性是会生成好多的.map文件，就是方便代码出错的时候可以看到在哪里错的，发布到线上的时候也不用这个，所以果断的改了。

以后再持续的优化别的地方，不断努力中...

vue-cli2 生成的项目打包优化（持续学习中）的更多相关文章

  1. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  2. Vue -- vue-cli(vue脚手架) npm run build打包优化

    这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...

  3. Vue+Webpack之 代码及打包优化

    本文重点介绍Vue单页面应用的优化手段: 异步加载 面切换时加loading特效 点击延迟 inline manifest 逻辑代码优化 依赖包体积优化 cdn引用 Vue代码优化 异步加载 所谓的异 ...

  4. vue-cli webpack2项目打包优化

    减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' ...

  5. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  6. [优化]深度学习中的 Normalization 模型

    来源:https://www.chainnews.com/articles/504060702149.htm 机器之心专栏 作者:张俊林 Batch Normalization (简称 BN)自从提出 ...

  7. 小型 Web 页项目打包优化方案

    背景   目前团队中新的 Web 项目基本都采用了 Vue 或 React ,加上 RN,这些都属于比较重量级的框架,然而对于小型 Web 页面,又显得过大.早期的一些项目则使用了较原始的 HTML ...

  8. vue-cli项目打包优化(webpack3.0)

    1.修改source-map配置:此配置能大大减少打包后文件体积. a.首先修改 /config/index.js 文件: // /config/index.js dev环境:devtool: 'ev ...

  9. 一次vue-cli 2.x项目打包优化经历（优化xlsx插件）

    一.分析各模块打包后大小 用vue-cli创建的项目,已经集成 webpack-bundle-analyzer.详见文件 build/webpack.prod.conf.js,代码如下: if (co ...

  10. 基于 Ant Desigin 的后台管理项目打包优化实践

    背景 按照 Ant Design 官网用 React 脚手构建的后台项目,刚接手项目的时候大概30条路由左右,我的用的机子是 Mac 8G 内存,打包完成需要耗时2分钟左右,决定优化一下. 项目技术栈 ...

随机推荐

  1. 转：理解Cookie和Session机制

    原文: 理解Cookie和Session机制 摘要: Cookie工作原理 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论 ...

  2. iOS 动画结束后 view的位置 待完善

    默认的动画属性,动画结束后,view会回到原始位置.但是如果设定了 CAAnimation的 removedOnCompletion 属性,那么view会保持这个位置!但是真实的接收 点击的frame ...

  3. node body-parser

    var express = require('express'); var app = express(); var bodyParser = require('body-parser'); // p ...

  4. Winform窗体实现简单的二维码生成和保存

    二维码的生成需要用到二维码生成的类库,ThoughtWorks.QRCode.dll 步骤: 第一步:下载二维码生成类库,ThoughtWorks.QRCode.dll 第二步:新建winform项目 ...

  5. java复用和传参

    java复用和传参的三种方法总结: (1) 直接在一个类中调用函数 : 1 package test1; 2 3 public class a 4 { 5 public static void get ...

  6. ios开发错误笔记

    今天的奇葩错误,最后解决方式是删除了手机上面的快捷方式,然后再clean,然后再重启了xcode.无语了,xcode也经常出些奇葩问题,真无语啊. ios技术交流群:378501081..期待你加入. ...

  7. Running a Remote Desktop on a Windows Azure Linux VM （远程桌面到Windows Azure Linux ）-摘自网络（试了，没成功 - -！）

                              A complete click-by-click, step-by-step video of this article is available ...

  8. iterm快捷键及操作技巧（附Linux快捷键）

    标签操作 新建标签:command + t 关闭标签:command + w 切换标签:command + 数字 command + 左右方向键 切换全屏:command + enter 查找:com ...

  9. RFC3489 STUN之客户端所处环境探测流程与部分属性含义说明

    1 STUN客户端所处环境探测流程 1.1 流程图 1.2 流程图中Binding请求类型说明 类型1:Binding请求消息中不设置CHANGE-REQUEST,或若设置其相应更改IP与端口标志位都 ...

  10. react hooks 笔记

    1. 建议安装以上版本: "dependencies": { "react": "^16.7.0-alpha.2", "react ...