假面猫的博客

记录前端学习历程

排序:
默认
按更新时间
按访问量

webpack4系列第五发

Code Splitting code splitting 特性是在 webpack3 中实现的,实现的策略方案也有多种,比如我们在 vue 项目中,通过组件按需引用也可以实现代码切割。主要目的: 为 Vendor 单独打包(Vendor 指第三方的库或者公共的基础组件,因为 Vendor ...

2018-07-22 22:13:16

阅读数:200

评论数:0

webpack4系列第四发

HMR 和 Tree Shaking HMR(热模块替换) 在 webpack4 中的 HMR 配置及其简单,如下所示即可 : const webpack = require('webpack') module.exports = { plugins: [ new web...

2018-07-16 16:32:26

阅读数:304

评论数:0

webpack4系列第三发

ES6+ 和 图片 在项目中的使用 ES6+的转码 如果想使用ES6+ 语法,那可以使用 babel-loader 和 babel-preset-env 。 如果想进一步了解关于 babel 的信息,请看这两篇文章。 梦里babel知多少(一) 梦里babel知多少(二) w...

2018-07-15 19:32:14

阅读数:276

评论数:0

webpack4系列第二发

代码压缩 (HTML,CSS,JS) HTML代码的压缩,我们还是需要借助 htmlWebpackPlugin 。 new HtmlWebpackPlugin({ filename: 'index.html', // 配置输出文件名和路径 template: 'src/index.ht...

2018-07-15 01:51:14

阅读数:98

评论数:0

webpack4系列第一发

webpack4的改动其实挺大,但破坏性更新不算太多,称得上破坏性更新的恐怕只有 CommonChunkPlugin 的移除了。 和 webpack2 或者 webpack3 一样,你将很容易写出这样的配置。 const path = require('path') const ...

2018-07-13 17:04:37

阅读数:166

评论数:0

React——高阶组件(HOC)

What ?什么是HOC HOC(High Order Component) 是 react 中对组件逻辑复用部分进行抽离的高级技术,但HOC并不是一个 React API 。 它只是一种设计模式,类似于装饰器模式。 具体而言,HOC就是一个函数,且该函数接受一个组件作为参数,并返回一个新组件...

2018-06-04 13:23:22

阅读数:142

评论数:0

React——react-redux

因为自己是Vue开发者,所以会以Vuex的角度来看React的状态管理实现,这样可以帮助自己理解。毕竟两者都是参照Flux来分别实现的。之前写过一篇Vuex的分享 Vue中状态管理——Vuex 说起 react-redux 就不得不先说 redux。 Redux redux 是...

2018-04-24 12:25:03

阅读数:2042

评论数:0

性能优化——浏览器的缓存策略

为什么需要建立缓存策略 缓存对于web应用有着重要作用,通常我们需要对静态资源进行缓存。 缓存通常分为三种: 服务器端缓存,CDN缓存,浏览器端缓存。 其中浏览器端的缓存不会发起HTTP请求,所以耗时最短。在大型应用或者资源比较多的情况下,合理的缓存的策略能大大提高页面的加载速度,和降低带宽成...

2018-03-21 20:40:49

阅读数:153

评论数:0

js中实现深浅拷贝

值类型和引用类型 说起深浅拷贝,我觉得需要理清楚 值类型 和 引用类型 值类型 所谓 值类型 就是 undefined,null,number, string ,boolean 等五种基本数据类型, 应该还有一个Symbol类型。 值类型的数据存储在栈内存中 在 值类型 中修改值相当...

2018-03-16 13:52:43

阅读数:80

评论数:0

call,apply,bind,jsonp的实现

call的实现 先看下call的实例 let person = { name: 'SpwaN' } function getName() { console.log(this.name) } getName.call(person) // SpwaN call的特点: ...

2018-03-14 15:50:35

阅读数:54

评论数:0

webpack4: 代码分割CommonChunkPlugin的寿终正寝

这是小弟第一次翻译,虽自己理解了其精华,但无法精准表达,还望海涵。 webpack 4对块图进行了一些重大改进,并增加了对 chunk 拆分的新优化(这是对 CommonsChunkPlugin 的一种改进)。 让我们看看之前的块图存在的缺点。 之前的块图通过父子关系连接到其他块,c...

2018-02-28 23:25:32

阅读数:11318

评论数:0

创天下项目总结

路由模块 1, router这块只是单纯使用了的框架推荐的异步加载组件,并没有深入研究webpack的懒加载原理。 2, 在 /my 组件的设计上存在瑕疵,之前总是怀疑自己的用法错误,直到接触了React之后,才明白嵌套路由中的子路由是和父路由一起展示的。那说明用法是没有错。只是设计上有待商榷...

2018-02-25 17:12:09

阅读数:132

评论数:0

性能优化——CSS和JS的加载和执行

浏览器的渲染机制 HTML渲染过程的一些特点 顺序执行,并发加载 通过词法分析,通过HTML生成Token对象(当前节点的所有子节点生成后,才会通过next token获取到当前节点的兄弟节点),最终生成Dom Tree 浏览器中可以支持并发请求,不同浏览器所支持的并发数量不...

2018-02-23 18:49:43

阅读数:334

评论数:0

性能优化——webpack3 新增的Scope Hoisting

Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快, 它又译作 “作用域提升”,是在 Webpack3 中新推出的功能。 对比: util.js export default 'Hello,Webpack' main.js import ...

2018-02-17 00:55:11

阅读数:158

评论数:0

性能优化——Tree-shaking 的使用

Tree-shaking 字面意思就是 摇晃树, 其实就是去除那些引用的但却没有使用的代码。 Tree-shaking 概念最早由Rollup.js 提出,后来在webpack2中被引入进来,但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统Common...

2018-02-16 17:35:18

阅读数:856

评论数:0

axios 使用心得

从刚开始接触 Vue 时,官方维护了一个 request 项目是 vue-resource ,后来推荐使用社区的 axios 来作为 request 工具。 两者之间的区别: axios支持服务端(Node中自带的 request 包并不支持promise,通常需要使用bluebird来进行...

2018-02-09 14:13:03

阅读数:1040

评论数:1

零配置前端构建工具parcel 初探

前端圈内新工具层出不穷,不断提升各位FEer的开发效率和体验。 前端工程构建方案从grunt -> glup ->webpack 不断地在改进。webpack有很多优点,如:code splitting,HRM,css module , source map都是经常使用的,但功...

2018-01-25 14:50:45

阅读数:240

评论数:0

梦里Babel知多少(二)

Babel-preset-state-x看 vue-cli 生成的 babel 目录可以看到,在我们想使用一些新特性,且这些新特性并未正式发布时,需要安装 babel-preset-state-xTC39(ECMA规范的技术委员会)通常会采用5步来发布正式标准。 babel-preset-stat...

2017-09-28 14:41:36

阅读数:155

评论数:0

梦里Babel知多少(一)

平时开发中,经常需要用到ES6/ES7的语法。那么就需要用到Babel来对代码进行转码处理。 之前用Vue比较多,所以以Vue-cli作为参考来分析。 第一张图是几个月前的Vue-cli生成的 第二个图是今天使用Vue-cli生成的Babel-core顾名思义,这是 babel 的核心代码,...

2017-09-27 17:35:28

阅读数:299

评论数:0

Koa2 学习笔记(第五天)

Koa2的模板引擎使用现在主流的模板引擎为ejs,jade,nunjucks等。这里采用了ejs,因为比较符合前端HTML语法,不破坏结构。另外和express不同的是,Koa2还需要引中间件来支持模板的使用cnpm i ejs koa-views -Sconst Koa = require('k...

2017-08-26 01:34:58

阅读数:227

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭