删除vue打包大小限制_压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)...
问题
由于这次项目是在初学 Vue 之后的第一个正式项目，没有考虑到类似 路由懒加载、 按需加载的问题 ，所以呢，也算是没经验。
到了这些天，项目写得差不多了，准备放到服务器测试，才发现这个问题。
优化前：
app.js 2.3MB
vendor.js 2.4MB
vendor.css 612kB
app.js.map 9.13MB
vendor.js.map 16.21MB
//不一一列举....
优化
接下来看看优化方法。
优化步骤1： 不生成.map文件
在 webpack.prod.cong.js 文件下，修改配置项 sourceMap 设置为 false 或者删除：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
// sourceMap: true //将sourceMap关闭就不会打包出.map文件
}),
这样的话，开发环境就不会生成 .map 文件。
优化步骤2： 按需加载
对于项目中，一些 通用 或者 不是特别差异 的组件可以使用按需加载，在需要的时候加载即可，并且会自动缓存。
这时候需要在 router 文件夹下的 index.js 文件修改路由配置中的 组件引入 方式：
Vue.use(Router)
export default new Router({
routes:[{
path:"/",
component:function(resolve){
require(["./../components/Index"],resolve)
}
}]
})
这样的话，这个组件就会在你需要加载的时候才会加载。
优化步骤3： VueRouter的懒加载
在 vue-router 的模块引入，将默认的 import .. from .. 引入方式，修改为一步。如下：
const Foo = () => import("/Foo.vue)
```
然后在 `配置路由` 中，和之前一样使用：
Vue.use(Router)
export default new Router({
routes:[{
path:”/“,
component:Foo
}]
})
优化步骤4：将大的第三方包通过
一般将类似 `echarts` 这种比较大的第三方依赖包，通过 `` 标签来引入的话，会很大程度缩小打包的大小。
但是需要在 `vue` 配置文件这样配置：
`webpack.base.config.js` 中添加 `不打包` 的包的名称，这样打包的时候才不会把这些包一起打包进去：
module.exports = {
entry:{...},
output:{...},
resolve:{...},
module:{...},
externals:{
"echarts":"echarts" //不打包的包名
}
}
然后在 index.html 中用 标签引入依赖包的CDN或者其他地址。
优化步骤5： 图片压缩
这个不用怎么说，有个地址很好用，推荐下：tinypng
优化后
通过这几步骤，优化完成的每个文件都会缩小好多倍：
app.js 136.2kB
vendor.js 213.2kB
vendor.css 612kB //css 这个我还没办法
app.js.map 0MB
vendor.js.map 0MB
更多关于VUE压缩的方案大家可以看看下面的相关文章
删除vue打包大小限制_压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)...相关推荐
- 删除vue打包大小限制_如何优化 Vue 祖传代码
目录 前言 为什么要优化 从哪里开始下手 现在开始 1.代码压缩 2.删除一些废弃的页面 3.使用 cdn 优化 4.修改路由引入方式 结果 前言 "这页面加载也太慢了!",一个宁 ...
- vscode vue解决跨域_在vs code 中如何创建一个自己的 Vue 模板代码
首先,在vs code 中打开定义模板代码的地方 第一步,点击"设置"图标按钮,在弹出的菜单中点击的"用户代码片段"(也就是模板) 第二步,在弹出的框中选择新建 ...
- vue 生成发布包_年轻人如何从0到1封装发布一个vue组件__Vue.js
封装发布组件是前端开发中非常重要的能力,通过对常用组件的封装可以提升团队开发的效率,避免重复劳作且不方便维护.好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用. 本文讲述了如何一步步从0到1封 ...
- vue 引入json地图_在vue2.x中使用echarts,地图或者theme引入js 文件，会有问题，地图的json文件重新注册可以...
One-line summary [问题简述] 在vue2.x中使用echarts,地图或者theme引入会有问题 import echarts from 'echarts/dist/echarts' ...
- vue 图片宫格_微信小程序多宫格/九宫格抽奖 基于vue来写
/*整体布局采用定位实现 gameBox:父盒子,最外层背景图 bg1:灰色灯 bg2:点击开始按钮后,白色灯出现,同时要每个500s同bg1做切换隐藏显示 start:按钮样式 item1-8:通过 ...
- vue开发 百度地图 加载大量点导致卡顿解决方法（vue+vue-baidu-map+mapv）
造成卡顿原因 及解决方法(解释可能有误!!!) 自行通过F12进入调试窗口,可以发现点标注Marker会以div元素在dom树中渲染出来,需要占用的内存大,渲染慢且大规模的 DOM 操作(会造成重绘或 ...
- vue 添加全局组件_自定义vue全局组件(Loading为例)
首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...
- vue启动项目报错：npm ERR! missing script: serve解决方法
vue启动项目报错:npm ERR! missing script: serve解决方法 1.vue启动项目报错:npm ERR! missing script: serve 问题原因: 在配置文件中 ...
- vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小 可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件 其实这儿所说的压缩,就是图片重 ...
最新文章
- k64 datasheet学习笔记35---Analog-to-Digital Converter (ADC)
- html去除边角,WEB开发向HTML5及CSS3迈进（1）——圆框边角的处理
- VS2010编译选项查看MSDN
- 读取SD卡里面的BMP文件 显示到TFT上
- Vertical Menu ver4
- oracle中那个日期怎么相减_二手车鉴定中最容易混淆的日期读法，你会是那个读错的人吗？...
- linux查看系统的日志的一些实用操作
- Cpp / #error、static_assert、assert 区别
- 华中C语言程序简答题,华中科技大学0911年C语言程序设计试卷.doc
- vue.js 多页 php,如何使用 vue-cli 开发多页应用方法
- SP2010开发和VS2010专家食谱--第六章节--Web Services和REST（5）--Inserting new contacts through REST...
- JS中数组和字符串具有的方法，以及substring,substr和slice的用法与区别
- 【java奇思妙想】一个能够改变字体颜色、字号大小、字体样式的html网页
- [Color]彩色转灰度算法彻底学习
- Windows7安装PADS2007详细步骤____亲自实验总结
- web前端课程设计：猫咪领养网站 HTML+CSS+JavaScript
- 写了一个根据ISBN查询图书信息接口，把收藏的几百万本图书分享给大家
- ul导航条二级菜单被遮盖
- 微信小程序快递物流信息跟踪查询api接口对接快递鸟案例
- 机器学习模型上线及优化流程