压缩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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
layui选项卡效果实现代码
May 19 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
Vue中qs插件的使用详解
Feb 07 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
PHP文件上传原理简单分析
2011/05/29 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Web服务器框架 Tornado简介
2014/07/16 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python中hashlib模块用法示例
2017/10/30 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
学校运动会开幕演讲稿
2014/01/04 职场文书
读书活动总结范文
2014/04/26 职场文书
创先争优承诺书
2015/01/20 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis