压缩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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
关于this和self的使用说明
Aug 01 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
JS canvas实现画板和签字板功能
Feb 23 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
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
python获取网页状态码示例
2014/03/30 Python
python使用PyFetion来发送短信的例子
2014/04/22 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
英文自荐信
2013/12/15 职场文书
学校卫生检查制度
2014/02/03 职场文书
人大调研汇报材料
2014/08/14 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
计划生育责任书
2015/05/09 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python