![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
左手一杯酒
这个作者很懒,什么都没留下…
展开
-
浏览器性能分析工具
浏览器性能分析工具开始以chrome浏览器为例,使用F12打开开发者工具可以在隐身模式下打开浏览器,在隐身模式下打开Google Chrome。隐身模式可以确保Chrome在干净的状态下运行。例如,如果安装了很多扩展,这些扩展可能会影响到性能分析的结果。打开后可以看到几个Tab,性能分析时主要关注Performance 和 Memory。在进行性能分析时,经常会需要模拟低配置机器的性能,可以在Performance 内设置中限制CPU的使用,默认是降低4倍和6倍,也可以自定义。另外,我们能看原创 2020-09-30 13:12:36 · 804 阅读 · 0 评论 -
Webpack学习笔记(八):缓存
目的缓存的目的在于浏览器端能够缓存下资源文件,而不用花时间去服务器获取资源,降低网络流量,提高访问速度。缓存的问题在于,如何确保资源文件更新后,浏览器能够拿到最新的文件而不是缓存的过期文件。除了通过服务器端配置外,还可以通过webpack配置的方式解决这个问题。修改输出文件名webpack 提供了一种使用称为 substitution(可替换模板字符串) 的方式,通过带括号字符串来模板化文件名。其中,[contenthash] substitution 将根据资源内容创建出唯一 hash。当资源内容原创 2020-07-24 15:43:16 · 162 阅读 · 0 评论 -
Webpack学习笔记(七):代码分离
目的代码分离就是将代码分别打包到不同的bundle中,以获得更小体积的bundle,一方面加快打包速度,另一方面也可以优化加载时间入口起点(entry points)直接配置中手动分离代码const path = require('path');module.exports = { mode: 'development', entry: { index: './src/index.js', another: './src/another-module.js' },原创 2020-07-24 15:42:49 · 224 阅读 · 0 评论 -
Webpack学习笔记(六):生产环境
目的生产环境和开发环境不同,开发环境需要强大的source Maps 排查问题,需要HMR。但生产环境不需要这些,生产环境需要的是压缩bundle,资源优化,轻量甚至不需要source Maps。所以需要针对这两种环境进行区分配置Merge 工具生产环境和开发环境虽然有些不同,但还有很多配置都是相同的。为了防止重复配置,webpack可以保留一份common配置,针对不同环境进行个性化配置,最后将个性化配置和common配置组合起来。这个组合就使用的是merge安装依赖npm install --原创 2020-07-24 15:42:13 · 123 阅读 · 0 评论 -
Webpack学习笔记(五):开发环境和模块热替换
目的设置开发环境,使得开发体验变得轻松代码继承自Webpack学习笔记(四):管理资源,需要将mode设置为 ’development‘模式使用source Maps简单说,source Maps是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。使用source Maps的方式很简单,只需要在config里面指定devtool为要使用的哪种选项的source Maps即可 const原创 2020-07-24 15:41:39 · 145 阅读 · 0 评论 -
从webpack3+转成Vue CLI 4+遇到的问题, Zlib解压缩速度变慢
问题背景前端项目使用Vue框架,之前一直使用Vue CLI2 推荐的webpack打包方式, 使用原生webpack进行配置, webpack版本3+. 最近修改了打包方式, 升级到了Vue CLI 4+.问题描述前端服务接受服务器传来的数据, 进行解压, 然后进行其他处理. 这里面解压使用的是nodejs提供的zlib.unzip进行解压.主要代码如下:// data 为请求到的数据var buffer = Buffer.from(data, 'base64');zlib.unzip(buf原创 2020-07-01 18:42:28 · 749 阅读 · 0 评论 -
Webpack学习笔记(四):管理输出
Webpack学习笔记(四):管理输出目的避免在index.html中手动引入所有资源,使用插件进行管理,而不是继续手动管理分离入口代码继承自Webpack学习笔记(三):管理资源1.项目中添加新的js文件,作为打包的入口 webpack-demo |- package.json |- webpack.config.js |- /dist |- /src |- index.js+ |- print.js |- /node_modules2.修改webpa原创 2020-06-01 12:11:00 · 193 阅读 · 0 评论 -
Webpack学习笔记(三):管理资源
Webpack学习笔记(三):管理资源目的管理项目中CSS样式、图片、字体等资源,将他们和js文件一起通过webpack打包实现方式webpack 最出色的功能之一就是,除了引入 JavaScript,还可以通过 loader 引入任何其他类型的文件。也就是说,以上列出的那些 JavaScript 的优点(例如显式依赖),同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。webpack引入js文件之外的文件都是是通过loader实现的,例如引入CSS文件需原创 2020-06-01 12:09:56 · 193 阅读 · 0 评论 -
Webpack学习笔记(二):搭建一个简单的webpack实例
Webpack学习笔记(二):搭建一个简单的webpack实例一、预先准备环境配置: 需要安装node初始化项目: 使用npm初始化项目,生成package.json文件, 并安装webpackmkdir webpack-demo && cd webpack-demonpm init -ynpm install webpack webpack-cli --save-dev此时, 就构造好了一个基础的webapck项目二、添加文件内容在上步构造好的文件夹中添加inde原创 2020-06-01 12:08:15 · 256 阅读 · 0 评论 -
Webpack学习笔记(一):基本概念
webPack基础概念webpack是一个打包工具,webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle。入口入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起原创 2020-06-01 12:07:10 · 140 阅读 · 0 评论 -
使用js-xlsx导出excel分页和打印标题行
问题前端导出的excel需要进行分页处理便于打印,为了方便显示,打印时需要设置打印标题行(每一页都会打印标题)js-xlsx文档说明js-xlsx在文档中列出了一下几个属性,但没有具体说明,经过实验,可以得到其具体的作用ws[’!rowBreaks’]: array of row break points, e.g. [16,32] // 行分页,数组的值对应插入分页符的行ws[’!colBreaks’]: array of col break points, e.g. [8,16] // 列分原创 2020-05-11 10:02:16 · 1614 阅读 · 0 评论 -
Flex布局学习笔记
Flex总结1. 基本概念给div这类块状元素元素设置display:flex或者给span这类内联元素设置display:inline-flex,flex布局即创建!其中,直接设置display:flex或者display:inline-flex的元素称为flex容器,里面的子元素称为flex子项。注意,设为 Flex 布局以后,子元素的float、clear和vertical-align...原创 2020-04-30 14:03:10 · 252 阅读 · 0 评论