压缩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 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php防止sql注入的方法详解
2017/02/20 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
python3获取url文件大小示例代码
2019/09/18 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
生物科学专业职业规划书范文
2014/02/11 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
2014年财务科工作总结
2014/11/11 职场文书
家长会开场白和结束语
2015/05/29 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
react 路由Link配置详解
2021/11/11 Javascript
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python