chrome v28.0.1500.71 + nodejs v0.10.18 / firefox v14.0.1 + nodejs v0.10.18
为减少日志文件占用的空间，很多情况下我们会将日志文件以天或周为周期打包成tar.gz 包保存。虽然这样做有利空间充分利用，但当我们想查看压缩包内的内容时确很不方便。如果只是一个tar.gz文件，可以将其解压，再利用grep、awk或vi等工具查看或处理。不过如果有一个月或都一年的日志需要找出某些关键词的行，一个一个的解压，然后再看，是不是很不现实。那有没有什么简便的方法，可以不解压获得我们想要的内容呢？
在开始之前，你需要做一些准备工作，去阿里买一台服务器，服务器的具体细节其实并不是十分重要，我也不会在这里一步一步的教大家如何去买一个服务器。百度一下足够了，但是还是要贴一下这篇文章中，我所使用的服务器系统及其版本：
如果希望对在静态页面中引入的相关资源进行压缩（比如：CSS，JavaScript，图片等），可以使用Gulp实现。 当然，还可以其他其他打包工具，比如：Grunt，Webpack等等。
IIS7中支持了对静态和动态文件的压缩功能，但是对于JS文件的压缩需要进行一些简单的设置。 先打开IIS管理，选择我要设置的站点，然后在右边的功能区找到MIME TYPES看看里面是否有.JS的选项，如果没有可以手功加上
sharp 是 Node.js 平台上相当热门的一个图像处理库，其实际上是基于 C 语言编写 的 libvips 库封装而来，因此高性能也成了 sharp 的一大卖点。sharp 可以方便地实现常见的图片编辑操作，如裁剪、格式转换、旋转变换、滤镜添加、添加水印等。
jsdelivr是一个免费的CDN服务，可以利用它配合github来为页面静态资源提供加速，有效提升资源加载速度。
IIS7已经启用静态文件压缩(Gzip)但是死活不压缩，查找后发现是II7下MIME类型设置问题
当收集浏览器端每个用户核心性能指标时，可通过 web-vitals 收集并通过 sendBeacon 上报到打点系统。
如果使用的是butterfly主题，hexo-neat会与主题的各类配置本身起冲突，如果有压缩静态页面资源的需要，可以参考Hexo博客静态资源加速的相关内容。
本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用， 其他就是对接口优化等
作者｜joeyguo 原文｜https://github.com/joeyguo/blog/issues/14 在上篇《脚本错误量极致优化-监控上报与Script error》 中，主要提到了js脚本错误上报的方式，并讲解了如何使用 crossorigin 来解决 Script error 报错信息的方案，于是我们就可以查看到脚本报错信息了。而此时可能会遇到另一个问题：”JS 代码压缩后，定位具体出错代码困难！“。本篇《脚本错误量极致优化-让脚本错误一目了然》 将结合示例，通过多种解决方案逐一分析，让脚本错
前言 事实上, 只有10%-20%的最终用户响应时间是发在从 Web 服务器获取 HTML 文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间，就必须关注剩余 80%-90% 的最终用户体验。–Steve Souders 优化方法 项目技术栈： 框架：Vue2 。 打包工具：webpack 。 1.代码压缩 使用 gzip 压缩可以节省 50%-70% 的网络开销。 浏览器支持的压缩类型可以通过 network 的 Accept-Encoding: gzip, deflate 来查看。很多浏
本文讲述如何通过多种方案定位脚本错误，总结了解决方案包括：1. 使用 sourcemap；2. 保留空格和换行；3. SourceMap 快速定位；4. 开源方案 sentry。这些方案可以解决报错行列数定位问题，提高开发效率。
plugin是插件的意思，通常是用于对某个现有的架构进行扩展。 webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
对于任何一个网站来说，优化页面的访问速度是必须的，个人来说，只要加载页面十秒以上或长时间处于空白或加载状态，我会立刻关掉此页面的。你又能容忍几秒呢？
写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。
应用背景：应用采用前后端分离开发，前端直接使用nginx部署vue打包文件提供访问需要；
「本文之前发过，但是比较零散，这里我把用到的方案都汇总一下，方便大家索引，有需要的小伙伴可以收藏下方便查找。里边提到的几种方案，大家都可以对照着视频试一下」
松哥最近正在录制 TienChin 项目视频～采用 Spring Boot+Vue3 技术栈，里边会涉及到各种好玩的技术，小伙伴们来和松哥一起做一个完成率超 90% 的项目，戳戳戳这里-->TienChin 项目配套视频来啦。 ---- TienChin 项目也是一个前后端分离项目，前后端分离项目如果做成 SPA（单页面）的形式，就必然面临一个首屏加载的问题，因为默认情况下首页文件比较大，可能超过 1 MB，进而带来首页加载很慢的问题。所以我们要通过优化，来提高首页的加载速度。 问题的解决，一般来说有这样几
const Jarvis = require("webpack-jarvis"); plugins: [ new Jarvis({ watchOnly: false, port: 3001 // optional: set a port }) ];
数据从服务器传输到客户端，需要传输时间，文件越大传输时间就越长，为了减少传输时间，我们一般把数据压缩后在传给客户端。
Webpack是一个开源的前端代码打包工具，它可以将多个JavaScript、CSS、图片等静态资源文件打包成一个或多个静态资源文件并通过模块化管理打包后的代码以提高前端应用程序的性能和加载速度，Webpack支持CommonJS、AMD、ES6等多种模块化规范并且提供了强大的插件机制和开发者工具，可以帮助开发者进行代码优化、压缩、混淆、实时重载等操作
前言 gulp 是一个前端项目开发的自动化打包构建工具, 类似的打包工具还有webpack。 前端开发的过程中，会写到 js 文件，css 文件，我们的项目如果想上线，那么一定要体积小一点，就需要对原始的代码进行编译压缩。 环境准备 gulp 是基于node 运行的，使用npm 全局安装 npm install -g gulp 安装gulp依赖包,因为在上线后是不需要这个包的，所以将这个项目安装在开发依赖： npm install gulp --save-dev 安装完成会生成一个package-lock.
在H5中引入3D模型往往存在资源太大，可以通过模型网格压缩，通过glTF配合Draco压缩的方式，可以在视觉效果近乎一致的情况下，让3D模型文件成倍缩小
影响前端发布速度的有两个方面，一个是构建，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间。
概述 通过安装一些插件，使打包后文件减小，提升页面打开速度。 vue版本 2.6.11 脚手架vue/cli版本 4.5.0 优化方向 减少代码量（取消生产sourcemap）、 合并压缩代码（gzip）、 公共代码提取 优化前后对比： 0.jpg // 公共设置 const IS_PROD = ['production'].includes(process.env.NODE_ENV) // 生产环境 vue打包优化 1. 打包分析插件 1.1 安装插件 npm install --save-dev
友情提示：推荐阅读时间15分钟 + 练习时间15分钟 HTML5学堂：上一期给大家分享了Gulp的安装与使用，让大家对Gulp有着初步的认识。咱们学习使用Gulp的目的是提升开发效率，把开发过程中重复性的工作交给Gulp，让Gulp按照你的配置去完成操作。 Gulp本身给开发者提供了5个API接口，可以根据这些接口来开发Gulp插件。但是，Gulp目前拥有丰富的插件资源，开发人员可以根据项目的需求和个人偏好来配置使用这些插件，比如可以配置当修改了HTML文件浏览器自动刷新，也可以配置修改了CSS文件浏览器自
如项目代码目录展示的那样，除了常见的app.js作为入口文件，我们将用到的 3 张图片放在/src/assets/img/目录下，并在样式文件base.css中引用这些图片。
gulp是基于流的前端构件化工具。gulp是自动化项目的构建利器；不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。同时使用非常简单，学习成本低。这个压缩工具也是前端必学的的工具。
什么是 gulp 简单的讲，gulp 是一个构建工具，一个基于流的构建工具，一个 nodejs 写的构建工具，使用 gulp 的目的就是为了自动化构建，提高程序员工作效率😂。 入门指南 全局安装 gulp： $ npm install --global gulp 作为项目的开发依赖（devDependencies）安装： $ npm install --save-dev gulp 在项目根目录下创建一个名为 gulpfile.js 的文件： var gulp = require('gulp'); // 默认
通俗的来说， Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。关于 Source Map 的解释可以看下 Introduction to JavaScript Source Maps[7]。
Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码 Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件 提纲 本次优化构建代码质量基本技术： reactRouter按需加载； 公共代码提取，以及代码压缩； CDN接入； 开启gzip压缩； 接入treeShaking，剔除无用代码 开启Scope Hoisting （生产环境代码构建）为实时查看
这个插件提供html的编写提示，包括到属性的格式监测，语法细致监测纠正，非常好的。插件地址
LayaAir IDE的项目发布是开发者常用的功能，集成了项目混淆与压缩以及版本管理等产品发布功能。尤其是在微信、百度等小游戏平台推出以来，IDE中的项目发布也成为了适配各个小游戏平台的必备功能。
我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
jQuery 是一个 JavaScript 框架。底层封装了大量 JavaScript 代码。
在网页中加载并显示PDF文件是最常见的业务需求。例如以下应用场景：（1）在电商网站上购物之后，下载电子发票之前先预览发票。（2）电子商务管理系统中查看发布的公文，公文文件一般是PDF格式的文件。
今天思考下前端源码安全的东西，不讲前端安全的大课题，只是针对于源码部分。 在我看来，源码安全有两点，一是防止抄袭，二是防止被攻击。
动态压缩 Vue 还是使用普通的打包编译后的文件，将前端编译打包后的文件拷贝到 Nginx 的 html 目录下，然后访问 nginx：http://192.168.91.129
主要是为了帮助大家搜集一下前端开发中要用到的一些东西，打造一个前端开发工具字典，方便大家查阅。
这是优化前的页面加载状态：执行npm run build打包项目，出来的vendeor.js文件，基本都是1M以上的的巨大文件，没有用户能忍受5s以上的loading而不关闭页面的，如图所示：
动态一 : Serverless Framework 部署性能优化 6 月 1 日正式上线 产品介绍： 开发者在使用框架组件部署项目时，由于项目过重，node_modules 文件夹过大，导致打包压缩代码超时，甚至内存溢出。为此，Serverless 团队近期对部署做了一个性能优化，原来部署一个 Next.js 的 Demo 项目大约需要 1 分钟，现在仅需十几秒。查看详情：《腾讯云 Serverless 部署应用耗时降低了 73%》 产品特性： 项目代码的压缩方式为从 adm-zip 更新为 archi
目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # offline config passed to sw-precache. service_worker: maximumFileSizeToCacheInBytes: 5242880 staticFileGlobs: - /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2} -
原创不易，未经作者允许禁止转载！！ 前段时间和天诚学长（21届上岸TX的大佬）交流了一下他在Webpack CSS压缩遇到的坑，一时兴起总结了这篇Webpack体积压缩相关的知识，希望你读完能有所收获
管道提供了一个输出流到输入流的机制。通常我们用于从一个流中获取数据并将数据传递到另外一个流中。
1、为了防止别人窥探Js,我们通过会对代码进行压缩，这种压缩在一定程序上可以阻止一部分人对代码的查看。通过使用此工具，可以还原压缩前的内容，这是我使用过后发现的最强大的功能。 2、类似于其他IDE一样，可以完成Html&JS&CSS的格式统一。
我们很高兴的宣布React v16.0发布了，这次版本的新增了一些呼声很高的特性，包括支持render返回数组和字符串、错误处理、portals、自定义DOM属性、优化服务器端渲染以及减少文件大小。
而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。
部署前端之前，开发者通常会对代码进行打包压缩，这样可以减少代码大小，从而有效提高访问速度。然而，压缩代码的报错信息是很难Debug的，因为它的行号和列号已经失真。这时就需要Source Map来还原真实的出错位置了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
