webpack 与 vue

在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久。虽然尽可能减少请求次数,但是单个包太大也不是好事

思路

  • 组件按需加载
  • vue-router 的懒加载
  • 第三方包分离
  • 代码分割时,

组件按需加载

  • 现在ui库大多都是以组件的形式进行处理,因而不用将整个库都导入,只需导入想要的即可
  • 根据对应库的文档进行操作即可,现在每个库都有对应的使用流程,及相关配置,并不是很难
  • 只是在导入css样式时依旧需要全部导入(目前只能如此)

vue-router 懒加载

  • 利用 promise 异步功能,进行相关配置后,页面点击时,会根据相应的进行页面加载,而不是一次性加载完,毕竟有些页面也许根本就不会进入
  • 语法: componet: () => import('**/*') 如果是大量的,最后提取进行封装成函数,这样调用就好了

第三方包分离

  • 经常会引入第三方库,但是这些感觉没有必要也混入到一个文件中
  • CommonsChunkPlugin通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用
entry: {
// 分离第三方包
vendor: ["jquery", "other-lib"],
app: "./entry"
},

代码分割

  • 使用 promise 作为分割点
  • 需要使用相应的插件LimitChunkCountPlugin ==== 会注意到有一些很小的 chunk - 这产生了大量 HTTP 请求开销。幸运的是,此插件可以通过合并的方式,后处理你的 chunk,以减少请求数。

开启Gzip进行压缩

  • 这个需要服务器配合才可以

首屏加载慢

vue-router
// prev
const component1 = () => import('@/components/**') //now 利用webpack require.ensure
comst component2 = r => require.ensure([], () => r(require('@/components/+'**'+.vue')))

test

经过测试 使用路由懒加载的 import 反而比 require.ensuse更好

原始,没有启用的结果

使用 import方式

  • 源码

  • 打包的结果

使用 require.ensuse方式

  • 源码

  • 打包后的结果

总结

  • 以后就直接使用 import 进行懒加载了
  • 若是多页面,(现在开发的都是SPA),可以在入口进行处理,

路漫漫其修远兮,吾将继续前行,苦修

vue打包体积优化之旅的更多相关文章

  1. webpack 与 vue 打包体积优化

    webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...

  2. VUE打包上线优化

    1.将vue vue-router vuex 尽量使用CDN externals: { 'vue':'Vue', 'vue-router':'VueRouter', 'vuex':'Vuex', 'a ...

  3. webpack打包体积优化

    优化: 1:外部引入模块(cdn)     如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302. 2:图标优化 ...

  4. vue打包速度优化

    这是一个很头疼的问题,webpack极大的简化了前端自动化配置,但是打包速度实在是不如人意.在此之前,本人也尝试过网友的一些方法,但是,很多坑,跳进去就出不来,经过多个项目实践,现总结一下我用到的优化 ...

  5. vue 打包体积过大 实现懒加载 ????

    import Vue from ‘vue’ import Router from 'vue-router' //把路由对应的组件定义成异步组纪检 const hello = resolve => ...

  6. webapck 打包体积优化策略

    一.概述 1.Tree-shaking 2.公共资源分离 3.图片压缩 二.Tree-shaking Tree-shaking:1个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到 ...

  7. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  8. vue 打包优化

    vue 打包优化 路由按需加载 通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后 ...

  9. Vue打包优化之分析工具webpack-bundle-analyzer

    // 1. 安装 cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入 con ...

随机推荐

  1. filebeat+logstash通过zabbix微信报警

    一.安装软件: 1.在要收集日志的机器上安装filebeat: 1).下载安装: cd /usr/local/src wget https://artifacts.elastic.co/downloa ...

  2. C++ char float int string 之间的转换

    string str = "123"; string 转 int int i = atoi( str.c_str() ); string 转 float float f = ato ...

  3. Hbase Region Server整体架构

    Region Server的整体架构 本文主要介绍Region的整体架构,后续再慢慢介绍region的各部分具体实现和源码 RegionServer逻辑架构图 RegionServer职责 1.    ...

  4. HBase1.2.6 预分区后,数据不进入预定分区的一个 bug

    rowkey 如下: 19000015115042900001511504390000151150449000015115045900001511504690000151150479000015115 ...

  5. 验证url格式

    //验证url var url=$("#address").val(); var regUrl = /^http[s]{0,1}:\/\/.+$/ ; if(url.match(r ...

  6. Django学习笔记之Cookie、Session和自定义分页

    cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

  7. 20145216 史婧瑶《Java程序设计》第6周学习总结

    20145216 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 10.1 InputStream与OutputStream 如果要将数据从来源中取出,可以使用输 ...

  8. Ubuntu 12.10 用wubi安装到硬盘中

    wubi安装的优势: ubuntu可以像安装软件一样方便的安装.删除,不影响物理机的原有系统 这种方式安装的ubuntu不用担心功能会有所缺失,ubuntu所有的功能都在 和安装了双系统一样,没有什么 ...

  9. vim寄存器与复制粘贴的实现

    对于大多数在Ubuntu下使用vim作为常用编辑器的同学来讲,他们遇到的第一个比较大的麻烦来自于vim与外部应用的复制粘贴. 当然,愿意选择ubuntu以及vim的同学肯定是google好手.不幸的是 ...

  10. xstream中几个注解的含义和用法(转)

    XStream是个很强大的工具,能将Java对象和xml之间相互转化.xstream不在意java类中成员变量是私有还是公有,也不在乎是否有默认构造函数.它调用方式也非常简单:从xml对象转化为jav ...