实际开发中，在项目上线之前，我们编写的js代码是需要进行压缩的，我们可以采取压缩软件或者在线进行压缩，这不是我们的重点，在webpack中实现JS代码的压缩才是本节的核心。
如果使用的是butterfly主题，hexo-neat会与主题的各类配置本身起冲突，如果有压缩静态页面资源的需要，可以参考Hexo博客静态资源加速的相关内容。
部署前端之前，开发者通常会对代码进行打包压缩，这样可以减少代码大小，从而有效提高访问速度。然而，压缩代码的报错信息是很难Debug的，因为它的行号和列号已经失真。这时就需要Source Map来还原真实的出错位置了。
web-see[1] 前端监控方案，提供了 前端录屏+定位源码 方式，让bug无处藏身
作者｜joeyguo 原文｜https://github.com/joeyguo/blog/issues/14 在上篇《脚本错误量极致优化-监控上报与Script error》 中，主要提到了js脚本错误上报的方式，并讲解了如何使用 crossorigin 来解决 Script error 报错信息的方案，于是我们就可以查看到脚本报错信息了。而此时可能会遇到另一个问题：”JS 代码压缩后，定位具体出错代码困难！“。本篇《脚本错误量极致优化-让脚本错误一目了然》 将结合示例，通过多种解决方案逐一分析，让脚本错
报错内容： TypeError: gulp.on(...).on(...).on(...).on(...)\.start is not a function 问题分析：一般这种情况是因为gulp版本引起的。
本文讲述如何通过多种方案定位脚本错误，总结了解决方案包括：1. 使用 sourcemap；2. 保留空格和换行；3. SourceMap 快速定位；4. 开源方案 sentry。这些方案可以解决报错行列数定位问题，提高开发效率。
今天，逛松果博客的时候，看到了他分享的《wordpress 通过代码压缩网页》一文，让我想起了其实张戈博客之前也用过这个功能，当时是在 WP 迷博客看到的纯代码版本，用了之后发现和知更鸟主题会产生冲突
在vue配置中，由于各插件版本兼容性差异可能会引发此问题的产生。 UglifyJs是一款可以解析、混淆、压缩JS的工具，此处的UglifyJs是配置在脚手架/webpack中，运行在node环境中的小插件。关于UglifyJs：
随vue技术逐渐成熟，开发者们热爱的脚手架vue-cli也一步步升级优化。在体验度不断上升的过程中，也必不可少的要踩一些坑。 本篇主要记录下在vue-cli2.x升级到3.x以及用Mac系统的踩坑记录。
安装完gulp环境，并且配置好gulpfile.js，执行静态文件压缩和代码混淆时，出现如下错误： Error: Cannot find module 'gulp-clone' Error: Cann
然后在 /build/utils.js 创建 getHtmlArray 方法，用来自动生成多个模板的配置：
PWA的全称是Progressive Web Apps，译为渐进式网络应用程序。装配了PWA以后，用户可以将网站作为WEB APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。本文讨论的是使用两种方案实现PWA。最终效果不尽相同，但是都可以实现原生应用体验和更新弹窗提示。其实还有个离线博客，但是视方案不同会有很多BUG，而且离线博客意义何在啊！
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
一款基于Google Closure compiler压缩Js文件插件。 快捷键: Ctrl+Alt+M 当前文件内压缩Js代码（不推荐） Ctrl+Alt+Shift+M 压缩Js并生成压缩文件 *.min.js 安装成功重启，如果报错，在配置里改一个参数，"compiler": "uglify_js", { // the closure compiler adds new lines every 500 characters // for some proxie
这是pnpm在读package.json中的配置时出现的问题,pnpm.overrides或者resolutions存在"//"，选择删掉，因为依赖源选择好了，在国内应该都有镜像
因为使用javascript语言来开发，特别是使用离线部署的方式，代码都会存储在用户电脑里，而一般商业插件，也需要考虑一下代码保护问题。
最近在使用 Vite4.0 构建一个中型前端项目的过程中，遇到了一些坑，也做了一些项目在构建生产环境时的优化，在这里做一个记录，以便后期查阅。(完整配置在后面)
来源：子慕大诗人 http://www.cnblogs.com/1wen/p/7942608.html 导火索 有一天一个测试同事的一个移动端页面白屏了，看样子是页面哪里报错了。 我自己打开页面并没有报错，最后发现报错只存在于他的手机，移动端项目又是在微信环境下，调试起来会比较麻烦，最后用他手机调试才发现问题： 是他账户下面有个对话的消息数据有问题导致页面报错了。 一般遇到这种情况只有用他的手机或者账户调试能很快查到问题，如果是外部的用户怎么办，我没法拿他的手机去测试。 其实这个问题很常见，但是这次我觉
jsdelivr是一个免费的CDN服务，可以利用它配合github来为页面静态资源提供加速，有效提升资源加载速度。
EasyNVR既有软件版也有硬件版，平台基于RTSP/Onvif协议将前端设备接入，可实现的视频能力有视频监控直播、录像、视频转码分发、检索与回放、云存储、智能告警、国标级联等。平台可将接入的视频流进行转码分发，对外输出的视频流格式包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等。
不知道使用 ios 设备的博友在浏览本站页面的时候有没有发现一个问题，所有页面评论模块都是不显示的！（记得大胡子哥有评论提醒过我移动端不能评论，还问我是不是故意这样设置的，其实这就是个bug）通过 MAC 审查可以发现控制台报错了，似乎是一个正则语法问题，但这个问题一直以来都没有得到解决，直到今天为止。
今天组长跟我们讨论了个问题，说是文章存储占用有点大，消耗宽带流量费，让我看看能不能找个方法解决一下（文章存储的是html字符串）。第一反应是没什么头绪，能想到的就是将相同的字符串替换成一个标识之类的，小程序再通过标识替换回原本的字符（感觉就不是很靠谱...）。
通俗的来说， Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。关于 Source Map 的解释可以看下 Introduction to JavaScript Source Maps[7]。
你会发现代码在抛异常的地方断住了，这就是异常断点的功能。当你不知道哪里抛的异常的时候，可以用这个。
现在不知道还有多少项目没用框架开发，虽然觉得应该是没有，但是保不齐还有很多，毕竟一些项目迭代的太多了，想要重构太花成本，就一直留存至今。
前端工程化：在企业级的前端项目开发中，把前端开发所需的工具、技术、经验等进行规范化、标准化。
这个括号的目的，是为了把function(){}转化为表达式。像一些库的源码，喜欢用如下方式代替:
☞ 收集日志的方法 平时收集日志的手段，可以归类为两个方面，一个是逻辑中的错误判断，为主动判断；一个是利用语言给我们提供的捷径，暴力式获取错误信息，如 try..catch 和 window.onerror。 1. 主动判断 我们在一些运算之后，得到一个期望的结果，然而结果不是我们想要的 // test.js function calc(){ // code... return val; } if(calc() !== "someVal"){ Reporter.send({ positi
前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、 标准化。最终落实到细节上，就是实现前端的“4 个现代化”： 模块化、组件化、规范化、自动化
对于任何一个网站来说，优化页面的访问速度是必须的，个人来说，只要加载页面十秒以上或长时间处于空白或加载状态，我会立刻关掉此页面的。你又能容忍几秒呢？
写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。
http://down.htmleaf.com/1801/201801271505.zip
为减少日志文件占用的空间，很多情况下我们会将日志文件以天或周为周期打包成tar.gz 包保存。虽然这样做有利空间充分利用，但当我们想查看压缩包内的内容时确很不方便。如果只是一个tar.gz文件，可以将其解压，再利用grep、awk或vi等工具查看或处理。不过如果有一个月或都一年的日志需要找出某些关键词的行，一个一个的解压，然后再看，是不是很不现实。那有没有什么简便的方法，可以不解压获得我们想要的内容呢？
https://juejin.cn/post/6965022635470110733
前言 开发者有时会面临上线的生产环境包出现了异常? ，在长期生产bug并修复bug的循环中总结出一下几个痛点： 无法快速定位到发生错误的代码位置，因为脚手架构建时会用webapck自动帮我们压缩代码
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78472535
前言 gulp 是一个前端项目开发的自动化打包构建工具, 类似的打包工具还有webpack。 前端开发的过程中，会写到 js 文件，css 文件，我们的项目如果想上线，那么一定要体积小一点，就需要对原始的代码进行编译压缩。 环境准备 gulp 是基于node 运行的，使用npm 全局安装 npm install -g gulp 安装gulp依赖包,因为在上线后是不需要这个包的，所以将这个项目安装在开发依赖： npm install gulp --save-dev 安装完成会生成一个package-lock.
本文主要介绍了如何将一个使用webpack构建的web应用打包为适用于各浏览器的可执行文件。首先介绍了webpack和browserify的区别，然后说明了webpack的配置文件，紧接着介绍了如何设置多入口，并分析了生产环境基于node的webpack如何处理。最后，作者分享了如何对css、js代码进行压缩、图片进行优化以及支持多入口的打包结果。
在开始之前，你需要做一些准备工作，去阿里买一台服务器，服务器的具体细节其实并不是十分重要，我也不会在这里一步一步的教大家如何去买一个服务器。百度一下足够了，但是还是要贴一下这篇文章中，我所使用的服务器系统及其版本：
在布达佩斯2022 JSConf会议上，tc39（ES标准委员会）成员Gil Tayar介绍了一份当前仍处于stage 1阶段的提案 —— Type Annotations，意在让原生JS支持类型注解。
npm ERR! A complete log of this run can be found in:
描述 npm run build打包后，生成 dist文件夹。从该文件夹打开 dist/index.html页面，发现页面空白，且控制台报错。原因是路径配置有问题。方案根目录打开/新建 vue.config.js，配置路径：
在使用 webpack 的时候，很常见的一个构建优化手段就是缩小构建目标。比如在构建阶段只构建 src 里面的模块代码，对于 node_modules 里面所引入的三方包不进行构建操作。
这一步之后，打包后会发现很大的chunk-vendors.xxxxxxx.js不见了，其实是分成了不同的js文件
本文主要聊聊为什么要在 Webpack 中使用 Source Map？以及 Webpack 提供了哪些 Source Map 的使用方式，我们应该在开发环境和生产环境如何使用 Source map
webpack 自带 BannerPlugin，我们只需要在 webpack.config.js 中配置即可：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
