warning: 这篇文章距离上次修改已过458天,其中的内容可能已经有所变动。
我们在开发时一般使用框架,vue,react,es6模块化,scss等,这样的代码要想在浏览器运行必须转成浏览器识别的js,css才能运行,所以这时候就需要webpack了。 除此之外,打包工具可以压缩代码,做兼容性处理,提升代码性能等。
需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错
起因 某天的早上我悠哉的来到了工位,吃起了早餐并接了一杯水,刚准备大干一场的时候,主管来了。 张口就是:小刘啊 你这个月的绩效要被扣没了啊! 我很是不解啊 难道我犯啥错了 上次忘了冲厕所? 偷看隔壁工位的测试妹子? 这也不至于啊! 于是问: 刘总 什么原因 要扣我的绩效? 刘总答曰:你上次更改的版本发布后 出现了一个漏洞 说罢丢了张图给我 📷 我前思后想 后思前想 都没印象代码里有这东西😳 于是说: 刘总 这个不说百分之百 与我无关 至少百分之九十与我不搭边,这项目我刚参与 一共就写了两行代码。我先排查下
由于公司项目的需求,需要实现动植物名录的添加,包括姓名等信息和图片等,需要使用bootstrap-fileinput的上传插件,在提交添加界面表单数据的同时上传一张或者多张图片,并将上传的图片保存到本地磁盘中(本文是f:盘的目录下),在在实现的时候,不适用bootstrap-fileinput上传插件本身的上传按钮(因为本身的按钮只能上传图片),需要点击提交,将表单的其他信息和图片一起提交到后台。
“ 上次完成了一个初级的API服务器的搭建,今天来给它增加点新功能,要看前面内容的,戳这里”
安装webpack-bundle-analyzer这个插件,然后使用npm run build --report输出项目打包情况,直观的比较哪个bundle文件的大小,有针对性的进行模块化拆分
LazyLoad大家再熟悉不 过的一个jquery插件了,它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才会加载并显示出来,这和图片预加载的处理方式正好刚好相反。图片不多 的页面时,效果并不太明显,但是当页面大图片比较多的时候,这种效果就比较显著了,明显加快了页面的加载速度。浏览器将会在加载可见图片之后即进入就绪状 态,在某些情况下还可以帮助降低服务器负担。 因此,比较流行的wordpress主题,typecho主题,emlog主题等都使用了lazyload图片延迟加载来实现快速加载页面。 当然啦,你的网站纯文字的,就没必要多搞个jquery插件了。
拷贝项目根目录的wxSearchView文件夹到你项目的根目录下(也可以其它位置)。 在你的wxss文件里导入组件的样式(文件位置为相对位置):
毕竟对于前端来说,优化是躲不开的主题。在看200(cache)和304区别的时候,翻到了雅虎这边归纳出来的准则,虽然是十多年前的东西了吧,但是还是具有参考价值的,因此在原文基础上我进行了一些归纳翻译。
Cola主题是基于EMlog开源程序开发的成品模板,目前EM的主题市场不缺各种多功能主题,但本套主题主要打造简约而不简单为主,没有多余的花俏,功能实用,SEO简单优化。Cola主题适用于博客站、图片站、多媒体分享站、下载站!
前端的优化,主要可以通过减少HTTP请求、非实时请求改异步、缓存、文件压缩、CDN加速、独立图片服务器等。
在浏览网站的时候,通常会5秒左右在顶部显示一个广告。过了5秒钟将这个广告隐藏。在网站的首页上显示这个广告。
React-Redux-Saga是一个用于处理Redux异步操作的中间件,它的实现原理基于生成器函数(Generator Functions)和事件监听模式。
前两篇文章发出来后,有一些网友在后台咨询我一些问题,我把它们归总罗列在一起。这篇文章既是答网友问也是对前两篇的补充和复习。
本文作者:IMWeb coolriver 原文出处:IMWeb社区 未经同意,禁止转载 1 前言 对于一个web前端开发者,chrome浏览器是一个工作,学习和生活的必备工具。除了chrom
对于一个web前端开发者,chrome浏览器是一个工作,学习和生活的必备工具。除了chrome本身的基本能力(控制台等)外,能大幅提高这个神器的使用体验的是,可扩展能力(插件)以及丰富的插件生态。
函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的。反而形成一种视觉效果,就是一张图。就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样。 同理,可以类推到js代码。在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
写在开篇哈喽!我又来写”水文“了,回顾上篇讲到的class属性,那么class属性和本篇要讲的id属性有什么不一样呢?跟随笔者步伐,一一解剖。HTML中的id属性直接先上个例子,看看效果,然后我们逐一剖析一下。看下面代码:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固,攻破前端技能</title> <style> #id1 {
作者介绍: 叶成,数据分析师,就职于易居中国,热爱数据分析和挖掘工作,擅长使用Python倒腾数据。 在开始本位之前,这里先感谢一下本人公司的伟哥和孟哥(虽然孟哥也没帮上啥忙,但是以后有的是机会,哈哈)。 上次发了篇运用selenium自动截取百度指数并识别的文章,点这里《抓取百度指数引发的图像数字识别》,其实感觉也是有些投机取巧的意思在里面,而且正如大家所知,用selenium比较吃内存,而且因为要渲染网页,爬去效率也比较低。所以这次我们直接请求图片,通过抠图、拼接、再识别的方式来完成这个百度指数爬虫项目
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用
提供静态网站托管服务的厂商还是很多的, 上次这个博客还是在阿里云的OSS上面, 虽然oss很便宜但还是没有一种”永久使用权”的归属感, 于是我遇到了Github Pages:
这本书是很久之前买的,今天回顾了一下,顺便记录一下笔记。 本书的副标题是“前端工程师技能精髓”可见这本书的牛逼之处。这本书也很薄,只有147页,但是每一章都是精髓。由于这本书每章提出了一个性能优化的方法,我们也就按照每张的具体内容给出吧。
前言 上次带大家写了原始版的 GAN,只生成了高斯分布。但兔子哥哥发现在 GAN 论文的底下,有 GAN 生成图片的 example。 因此,这足以说明 GAN 亦有能力生成图片,并非只有 DCGAN
# 这个设置已经给与静态文件的目录,所以上面的STATIC_URL与我们自己创建的
LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/d
网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。
前端js是解释型语言,用户可以直接获取到源码,容易作弊,比如直接修改血量(无限血量、永远不死)、直接刷接口(发奖)。针对这种现状,可以通过以下手段一定程度保证不出现事故。
基于Spring Boot + Vue_cli@3 框架开发的分布式文件系统,旨在为用户和企业提供一个简单、方便的文件存储方案,能够以完善的目录结构体系,对文件进行管理 。
React-Redux-Thunk是一个用于处理Redux异步操作的中间件,它的实现原理基于Redux middleware的概念。它的核心思想是允许action creators返回函数而不是普通的action对象。
ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。
前言删代码,不用跑路安装@vue/cli创建 Vue 项目项目结构vue-cli3.0修改端口号使用 elementUI安装 Vuex安装 axiosgithub参考
上次写了一个中国商标网的爬虫,最后呢,用了很笨的办法,跳过了一个反爬验证,总是有那么点感觉,这个博主好水啊,所以呢,这个问题必须得解决,至少在面上能看的过去。
继前面几篇文章后再来说说老生常谈的话题,怎么样提升前端性能。文中很多取材自网络及《High Performance Web Sites》,并根据自己工作中所接触到的知识整理而成。
你好,我是星辉,幸会幸会。 今天下午我参加了字节跳动EE部门的前端视频第一次面试,把它记录总结下来,希望能够对大家带来帮助。
话说,小程序也能做摇一摇功能,但好像没怎么看到过有什么小程序做了这个?(大家如果看到,可以留言推荐一下),按耐不住心中好奇心的花叔这两天研究了一下。 在说这之前,请允许我描述一下Nodes的新功能,因
我叫小风,是Windows帝国一个普通的上班族。上一回说到因为一个跨域请求,我差点丢了饭碗,好在有惊无险,我的职场历险记还在继续。
当然也可以自己写不用vuepress,自己写代码然后通过githubPages也是可以的,只是使用vuepress相对来说时间快一点,他生成的网站也是响应式的。
expires起到控制页面缓存的作用,合理的配置expires可以减少很多服务器的请求
几个月后的今天,我发现了单位网站中某篇文章中提到的一个域名,被腾讯网址安全检测识别为「危险-网站含有违规内容」…
本文实例讲述了TP5框架实现一次选择多张图片并预览的方法。分享给大家供大家参考,具体如下:
因为是“刚需”,所以网上早有无数的版本。有人已经用过,有人以后可能会用。有没有想过,类似这种小工具,其实你自己也可以实现。
合并图片(如css sprites,内置图片使用数据)、合并CSS、JS,这一点很重要,但是要考虑合并后的文件体积。
接下来继续练手,上次的项目二有读者反映讲的不是很明白,这次找了同类型的网站再来一次。
像我上次做的案例一样,每次路径前面都要../一下,不仅麻烦,而且如果复制粘贴这一块代码到了别的文件夹中,路径全部要重新更改
Hello 小伙伴们大家好,今天我们继续less的分享,上次说啥来着?大声说出来!变量!嵌套!今天说点啥?今天说运算、函数和混合。虽然上次我们已经用到了运算,这次就详细说一下咯!对了,这里说明一下,上次的代码在客户端引入css文件主要是为了为大家展示一下通过npm环境进行less编译的过程(生产环境也有很多就是这样用的),如果直接在客户端引入less文件也可以通过以下方式来引入:
以前很少关注这方面的问题,直达我们的技术经理找我们说要换框架,为什么换框架呢,因为缓存的问题,原来的项目是用版本号作为刷新的依据的。因为微信 公众号上有这样一个机制,使用版本好的话,有时做不到及时刷新,所以就用了vue.js,因为它有这样的功能就是如果某个文件里面的数据改变了,那么vue.js就会把这个文件的名字也相应的改掉,所以缓存里面的东西 就用不了了,这样就做到了及时刷新,向后台请求数据。
上次使用百度AI接口开发过人脸识别接口,今天腾出时间所以去看了看文字识别的技术接口文档。文字识别一样有SDK可以接入快速开发,但是我不准备使用SDK接入,本篇文章直接使用API文档接入文字识别API。上篇文章对Express框架进行了简单封装,我们可以在上篇文章的项目基础上继续进行。如果想从零开始搭建项目可以看下上一篇文章:jsonwebtoken生成与解析token
领取专属 10元无门槛券
手把手带您无忧上云