blog
blog copied to clipboard
huangshuwei
🈲黄书伟的个人博客
### 前言 大型单页应用（后面都是指spa），我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题。这种应用少则几十个单页，多则上百个单页。随着路由的频繁切换，每个路由对应的 vuex 中的状态将越来越多。为了做到页面的极致优化，我们需要将那些闲置的状态重置，以减小占用的内存空间。 ### 什么状态可以重置 vuex 强调采用集中式存储管理应用的所有组件的状态，但是我们真把所有的状态都放到 store 中去处理，你会发现开发起来非常痛苦。这里如果想很好的把控哪些数据需要放到 store 中去管理，首先要理解 vuex 是用来解决什么问题的。vuex 官网指出是为了解决**多个组件共享状态**的，那么我们就可以把多个组件的共享状态放到 store 中去管理，这里的多组件共享对于单页应用很多情况是跨路由的组件。如果 store只存储多组件共享的状态，那么我们就没必要去清理 vuex 中的状态了，因为这些状态随时会被用到。 而随着业务场景越来越复杂，很多与后台交互的逻辑也都放到了组件中，这样代码就变得很凌乱，vuex 也没有被充分利用。这时我们可以把与后台 api 交互的逻辑放到 vuex 中的action 去处理，后台返回的状态自然也就放到了...
这篇文章将介绍如何利用 webpack 进行单页面应用的开发，算是我在实际开发中的一些心得和体会,在这里给大家做一个分享。 关于这个单页面应用大家可以[结合这个实例](https://github.com/huangshuwei/webpackForSPA)去看。下面介绍的内容如果大家觉得这篇文章有不妥的地方，还请指出😂。 > 这篇文章的目的是解决我们在开发中会遇到的问题，不是一篇基础教程，还请谅解。 ## 项目目录 ## 我将根据这个目录结构进行讲解  - **dist**：发布的文件目录，即webpack编译输出的目录 - **libs**：放置公共的文件，如js、css、img、font等 - **mockServer**：模拟后端服务，即用webpack开发时模拟调用的后端服务（用nodejs服务模拟） - **node_modules**：项目依赖的包 - **src**：资源文件，里面包含css、font、html、img、js - **package.json**：项目配置 - **webpack.config.js**：webpack的配置文件 ## 项目的使用 ## 建议先运行一下这个项目，有一个大致的了解，再往下阅读。使用说明： ```...
先记录，后整理 1、使用代码分割技术，使一个路由对应一个js文件，按需加载 2、每个路由对应的请求，尽可能的少，按照chrome 的标准，每个域下最多同时处理6个请求。那么最多5个耗时较长的请求（留一个给页面切换用），否则会出现页面卡顿的情况 3、页面节点较多，渲染耗时较长的页面，使首屏优先渲染，其他组件延时渲染 4、适当的时机清除vuex 中不用的状态，否则大型单页面应用路由多次切换以后内存将持续上升
### 前言 什么是反向代理呢，[维基百科里原话](https://zh.wikipedia.org/wiki/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86)是这么说的“反向代理是代理服务器的一种。它根据客户端的请求，从后端的服务器（如Web服务器）上获取资源，然后再将这些资源返回给客户端” > 而正向代理相反，典型用途是为在防火墙内的局域网客户端提供访问Internet的途径。 ### 配置 ``` server { listen 80; server_name localhost; location / { proxy_pass http://localhost:8080; proxy_set_header Host $host:$server_port; } } ``` 然后执行命令`nginx -s reload` 使配置生效。 这是访问...
当前环境 chrome 版本62.0.3202.94 win10 ### 打开 fps 实时监测工具 1、Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu. 2、Start typing Rendering in the Command Menu and select Show...
先做笔记，后面整理： 不同浏览器，同一个域名处理请求的最大数： Firefox 2: 2 Firefox 3+: 6 Opera 9.26: 4 Opera 12: 6 Safari 3: 4 Safari 5: 6 IE 7: 2 IE 8: 6 IE 10: 8 Chrome:...
### 前言 有这样一个场景，页面渲染的信息是配置出来的，也就是我们渲染的内容是动态的。这种场景我们往往需要开发动态组件去支持。而动态组件可能会使用多种组件去实现。下面将介绍在 vue3 中，如何进行组件props 透传。 > 以下结合 element-plus 组件为例。 ### 动态组件 下面是动态组件里包含的几种 element-plus 组件： - dynamic-comp - el-input 组件 - el-date-picker 组件 - el-time-picker 组件 - el-select 组件 而每一种...
### 前言 随着项目功能增多，打包产生的js\css 越来越大，尤其是移动端H5应用，不仅导致网络传输增大，界面加载速度也会越来越慢。接下来介绍一种降低网络传输，加快页面加载速度的方法：gzip 压缩 ### gzip 是什么 gzip是一种[文件格式](https://en.wikipedia.org/wiki/File_format)和用于[文件压缩和解压缩的](https://en.wikipedia.org/wiki/Data_compression)[软件应用程序](https://en.wikipedia.org/wiki/Software_application)。后来也用于 HTTP 压缩，是一种用于加速[HTML和](https://en.wikipedia.org/wiki/HTML)[万维网](https://en.wikipedia.org/wiki/World_Wide_Web)上其他内容发送的技术。 ### gzip 原理 客户端和服务器之间是如何通信来支持gzip的呢？通过下图可以清晰的了解，[图片来源](https://zhuanlan.zhihu.com/p/24764131)  ### 网站 gzip 文件如何生成 **通过 nginx 生成** nginx 有一个模块是 gzip 模块，然后你只要开启了，nginx就会帮你把数据（静态资源 和 接口数据）进行压缩，然后传入到客户端，客户端来解压。从而节约传输时间，然后网站就能更快的打开。 >...