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 ...

随机推荐

  1. Java Hipster

    Java Hipster JHipster JHipster is a development platform to quickly generate, develop, & deploy ...

  2. infinite auto load more & infinite scroll & load more

    infinite auto load more & infinite scroll & load more https://codepen.io/xgqfrms/pen/NZVvGM ...

  3. 封装 React Native 原生组件(iOS / Android)

    封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...

  4. uniapp 创建简单的tabs

    tabs组件 <template> <view class="tabs"> <view class="bar" :style=&q ...

  5. Flutter:发布包

    [package] 生成包含模块化Dart代码的可共享Flutter项目 [plugin] 生成一个可共享的Flutter项目, 在Dart代码中包含带有API的API, 针对Android的平台特定 ...

  6. 「NGK每日快讯」11.19日NGK第16期官方快讯!

  7. 漫画 | C语言哭了,过年回家,只有我还没对象

    C语言回家过年,遇到不少小伙伴. 大家都在外地打拼,一年难得见面,聚到一起吃饭,都非常高兴. 听Java提到TIOBE, 正在喝酒的C语言激动起来. 自己常年在那里排名第二,人类用自己写的程序可真不少 ...

  8. C++算法代码——鹅卵石游戏

    题目来自:http://218.5.5.242:9018/JudgeOnline/problem.php?id=2334 题目描述 为了消磨时光,奶牛Bessie和她的朋友Elsie喜欢玩一种她们在农 ...

  9. Django-1.11中文文档——操作关联对象

    关联对象参考 写在最前面--基础示例模型如下: from django.db import models class Blog(models.Model): name = models.CharFie ...

  10. springboot源码(4)

    我们上3个篇章写了springboot的自动装配.servlet组件的注入以及web容器实现内嵌的原理,现在我们来看springboot启动过程中到底做了些什么,也就是打开我们的run方法: 这里我们 ...