web
qinqin772
这个作者很懒,什么都没留下…
展开
-
phantomJS web自动化
phantomJS 官网http://phantomjs.org/,英文的,phantomJS为4个方面提供解决方案:(1)web页面‘无头’测试【大意就是像浏览器一般,但是没有用户界面,去运行你的js代码】(2)站点页面截屏,就像pc上的截屏一样,不过这里的截的屏是站点的呈现(3)页面自动化(4)网络监控 本篇简单聊的是 (1),(3),因为刚接触这方面,故而全作自己的一点理解,...原创 2018-03-24 16:43:35 · 658 阅读 · 0 评论 -
webpack4【guides说明7】
webpack cache我们使用 webpack来打包我们的项目,生成一个可部署的/dist目录。一旦/dist的内容被部署到一个服务器上,客户(通常是浏览器)将会访问服务器并获取站点资源。获取资源会消耗一定的时间,因此浏览器使用了一种叫做缓存的技术,这样的话就可以节省掉一些不必要的网络流量从而让站点加载速度更快。但是当代码需要更新的时候,浏览器缓存技术也可以让开发者头疼。...原创 2019-09-27 11:57:06 · 249 阅读 · 0 评论 -
webpack4【guides说明6】
接下来是webpack的code splitting部分code splitting 是webpack最有特色的特征之一。这个特性使你可以分割你的代码进不同的“包”中,然后这些个被切割的包可以按需加载或者并行加载,这样就可以达到更小的包(代码块),以及控制资源加载优先级,如果应用得当,可能对页面的加载时间会有巨大的影响。通常有3中机制来有效分割代码:1.入口点:通过使用entr...原创 2019-09-22 02:08:43 · 274 阅读 · 0 评论 -
webpack4【guides说明5】
你如果动手自己试验了的话,你肯定会发现,每次自己更新index.js文件的时候,都需要自己手动在命令行输入打包命令,那么有没有办法解决这个问题呢,同样webpack也提供了解决方案。现在我们来看一下webpack的开发配置。首先是讲mode设置为development,这个选项如前文所见,会影响打包文件是否丑化处理的。1.使用sourceMap当使用webp...原创 2019-09-21 19:21:57 · 183 阅读 · 0 评论 -
webpack4【guides说明4】
如何对webpack的输出进行管理目前,我们已经手动地在我们的index.html中包含进了一些资源,但是随着项目增长又或者你想要在文件名中使用hash,以及你想要输出多个“包”文件时,手动维护index.html就会变得很困难。然而webpack的一些插件可以让这些事情变得很轻松。本次项目目录设定如下,删除了多余的资源文件最后调整下webpack.c...原创 2019-09-21 17:36:47 · 89 阅读 · 0 评论 -
webpack4【guides说明3】
接下来就是webpack资源管理了webpack配置如何加载css,图片,字体,本地数据,全局资源等我这里就只摘取一些通用的处理了webpack引入css以上增加的配置是为了让webpack支持引入css文件,这里就有前文说的webpack loader了,webpack loader是webpack系统里面一个很重要的概念。除此外,别忘了安装这两个loader——sty...原创 2019-09-21 12:20:14 · 109 阅读 · 0 评论 -
webpack4【guides说明2】
import/export 语法虽然在es2015中被标准化了,但目前大部分浏览器中还未支持。然而webpack提供了自己的一套解决方案。通常webpack会自动转换一下(模块引入,导出部分的)代码,这样转换后的代码既可以运行在老的浏览器上,也能运行在比较新的浏览器上。如果你查看一下之前产生的main.js文件,你会发现webpack是怎么做到的,(前面产生的文件是uglify后的文件,不...原创 2019-09-21 11:05:38 · 162 阅读 · 0 评论 -
webpack4【guides说明1】
以下内容基本上来自于webpack官网,自己这里只做了下手打,稍微加上自己的理解附上链接https://webpack.js.org/guides/可以看到guide部分有这么多小节:【1】.getting started1.创建测试用的目录guides,进入guides目录,npm init, npm install --save-dev webpack webpack-...原创 2019-09-21 09:04:52 · 248 阅读 · 0 评论 -
web页面的一些事件以及相关实验(3)
这次的实验,针对的是页面error处理的<html><head> <style> .container { border: 1px solid gray; margin: auto; max-width: 600px; height:...原创 2019-09-20 12:39:45 · 123 阅读 · 0 评论 -
web页面的一些事件以及相关实验(2)
这次实验来看看一些页面的事件DOMContentLoaded,readystatechange,load<html><head> <style> .container { border: 1px solid gray; margin: auto; max...原创 2019-09-20 12:23:32 · 232 阅读 · 0 评论 -
web页面的一些事件以及相关实验(1)
exp1. 同步加载远程js脚本阻塞页面渲染<html><head> <style> .container { border: 1px solid gray; margin: auto; max-width: 600px; hei...原创 2019-09-20 11:59:10 · 236 阅读 · 0 评论 -
webpack4【guides说明8】
webapck环境变量为了让webpack.config.js看上去专一,我们可以使用webpack 环境变量来区分开 开发打包配置和生产环境打包配置。webpack环境变量和操作系统shell如bash或者cmd.exe里说的环境变量不是一回事而。webpack命令行,环境参数--env,使你可以传递环境变量参数进来。然后在webpack.config.js里...原创 2019-09-27 12:42:08 · 188 阅读 · 1 评论