前端框架相关
文章平均质量分 94
Chepy2018
生命不息,学习不止
展开
-
webpack5.x源码解析
以下内容基于webpack@^5.12.3版本简略流程图文末有详细流程图本次收获对webpack的整体流程有了一个全面的理解理解了compiler、compilation、chunk到底是个啥整体设计模式、插件使用时机和分工都是值得学习的webpack函数这快的代码比较简单就不贴了,讲下大致流程归一化options,将部分配置转换成webpack需要的格式创建context上下文,取的是process.cwd()创建compiler实例初始化流插件初始化用户配置的插件,.原创 2021-01-28 16:26:55 · 958 阅读 · 0 评论 -
VueSSR的一些理解和详细配置
概念流程图这是具体的流程图,如何实现,后续配置会详解编译图解结合上面的流程图来理解编译的过程图,因为服务端渲染只是一个可以等待异步数据的预渲染,最终用户交互还是需要Client entry生成的js来控制,这就是为什么需要两个entry文件,但是拥有同样的入口(app.js)的原因。串联server和client的枢纽就是store,server将预渲染页面的sotre数据放入windo...原创 2019-07-19 21:28:08 · 9042 阅读 · 3 评论 -
webpack学习--流程篇
webpack流程小解这篇主要小小的介绍webpack的强大的强大的强大的强大的编译过程。前言在介绍正式编译过程之前,首先明确webpack是一个事件流驱动的组件,通过事件注册和事件触发完成整个编译过程。其中事件流的实现主要是依赖Tapable插件,Tapable的实现也很简单。//函数只有一个是参数,私有属性_plugins,用于记录注册的事件,事件名:回调函数functio...原创 2019-06-14 17:21:17 · 278 阅读 · 0 评论 -
webpack学习--基础篇
一、概念webpack作为前端构建工具,本质上也是基于node实现的一个工具类。下面官网这张图很好的介绍了webpack的本质:根据定义的入口,从入口开始,逐级深入,将所有依赖文件通过一定规则编译成浏览器可以识别的文件。二、基础配置webpck有基础配置可以分为4类:entry(入口),output(出口),loader(加载器)和plugins(插件)。参考文档:web...原创 2019-06-14 15:51:11 · 193 阅读 · 0 评论 -
vue子组件修改父组件的三种方法
一直使用$emit触发父组件的事件方法来实现改变父组件的值,导致把其他方法都给忘了。特别来整理下,加深下印象吧。1. $emit('event', val) 最常用的一种方法,父组件通过v-on绑定一个事件,在事件中修改自己的值,子组件通过$emit触发该事件在子组件MobileMessage中:这种方法有个好处就是可以在父组件的事件里面做一些额外的处理,...原创 2018-10-31 10:28:43 · 18674 阅读 · 0 评论 -
vue单页面通过prerender-spa-plugin插件进行SEO优化
prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化,如果是后台请求的数据需要做SSR处理,例如商品详情页,可使用Vue SSR,详细参考我的另一篇博客:VueSSR的一些理解和详细配置一、前言 之前虽然一直有看过SEO相关的文章,但是一直没去实践过,然后突然技术总监要求要对咱们的官网做个SEO的优化。于是才正式动手搞这玩意。地址:火石创造官网...原创 2018-08-07 13:39:40 · 13124 阅读 · 11 评论 -
vue-cli生成的配置文件解析(1)
一、前言 已经一个月没写博客了。。。这一个月一直在加班,幸好手上的项目一阶段也算完了,这周末也有点空闲时间了,于是好好把项目的配置文件给解读了一遍。这篇文章就先来解读vue-cli生成的配置文件中的dev-server.js吧。 从package.json中可以看到如下片段,dev模式是编译的就是dev-server.js文件,那么这个文件做了哪些配置呢?"dev...原创 2018-07-28 22:39:59 · 439 阅读 · 0 评论 -
vue2.0探索之路--vuex使用场景和集成
emmm...一直在犹豫要不要写这篇博客,因为觉得这些内容官网已经介绍的很详细了,再复述一遍貌似没太多意义。后面想了下,不复述、总结,如何加深自己的印象和理解呢,毕竟老年人,记性越来越差了。所以,开始吧。一、概述 vuex是一个专为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。二、使用场景 我相信很多人...原创 2018-06-19 15:45:46 · 12812 阅读 · 2 评论 -
前端性能优化
一、前言 随着现在网站越来越酷炫,各种图片,资源库,动画等等用的越来越多,在用户视觉和功能的提升的同时,性能也成为一个必须考虑的点。有人说“一个网站打开时间超过8s,网民就会流失70%以上。”,这种说法我觉得不是很正确的,除非是非常重要、必须要使用的网站,否则超过5s我基本直接关了,体验太差。所以,用户“忍让”是有极限的,要想把握更多的用户,增强用户体验,性能优化是必不可少的一环。二...原创 2018-05-26 13:01:05 · 151 阅读 · 0 评论 -
vue按需加载实现
按需加载:1. 将重量级路由内容单独生成一个或者多个js文件,而不是全部放在app.js中;2. 路由访问时再去加载对应的代码块。webpack打包会自动将所有依赖的JS代码打入一个文件,如果工程特别大,依赖的内容特别多的话,就会导致该文件特别的大,而大文件加载会导致性能不是特别的好。此时按需加载就显得尤为重要。参考:点击打开链接未按需加载生成的目录:app.js: 这个是项目代码的集合;mani...原创 2018-04-25 21:48:12 · 8620 阅读 · 0 评论 -
webpack--关于CommonsChunkPlugin拆分模块的应用
官网介绍:http://www.css88.com/doc/webpack2/plugins/commons-chunk-plugin/下面代码的源码见:一、介绍CommonsChunkPlugin 插件,是一个可选的用于建立一个独立文件(又称作 chunk)的功能,这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存起来到缓存中供后续...原创 2018-05-08 21:36:54 · 3593 阅读 · 0 评论 -
vue2.0探索之路--vue的生命周期
vue的生命周期分为8个阶段,beforeCreate->created->beforeMount->mounted->beforeUpdate->updated->beforeDestroy->destroyed。在vue从 实例化开始 到 组件改变 再最后到 组件销毁 都可以通过对应的钩子函数所监听,以下贴出一个组件的示例代码:impor...原创 2018-04-18 12:47:58 · 169 阅读 · 0 评论