压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)


Posted in Javascript onFebruary 03, 2020

问题

由于这次项目是在初学 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:将大的第三方包通过<script>标签引入

一般将类似 `echarts` 这种比较大的第三方依赖包,通过 `<script></script>` 标签来引入的话,会很大程度缩小打包的大小。   

但是需要在 `vue` 配置文件这样配置:

`webpack.base.config.js` 中添加 `不打包` 的包的名称,这样打包的时候才不会把这些包一起打包进去:  

module.exports = {
  entry:{...},
  output:{...},
  resolve:{...},
  module:{...},
  externals:{
    "echarts":"echarts" //不打包的包名
  }
}

然后在 index.html 中用 <script></script> 标签引入依赖包的CDN或者其他地址。

优化步骤5: 图片压缩

这个不用怎么说,有个地址很好用,推荐下:tinypng

优化后

通过这几步骤,优化完成的每个文件都会缩小好多倍:

app.js    136.2kB
vendor.js   213.2kB
vendor.css  612kB  //css 这个我还没办法
app.js.map  0MB
vendor.js.map 0MB

更多关于VUE压缩的方案大家可以看看下面的相关文章

Javascript 相关文章推荐
jQuery 操作option的实现代码
Mar 03 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
解析Vue.js中的组件
Feb 02 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 #Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 #Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 #Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 #Javascript
node 版本切换的实现
Feb 02 #Javascript
vue路由缓存的几种实现方式小结
Feb 02 #Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 #Javascript
You might like
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
如何使用php输出时间格式
2013/08/31 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python小项目之五子棋游戏
2019/12/26 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python 实现一个简单的web服务器
2021/01/03 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
保护环境倡议书300字
2014/05/19 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
如何理解PHP核心特性命名空间
2021/05/28 PHP