飞翔的熊blabla

fetchWaybillTags: fetchTags // 将 `fetchTags` 重命名为 `fetchWaybillTags`waybillTags: tags, // 将 `tags` 重命名为 `waybillTags`

获取当前组件的实例代理对象vm。使用provide将vm注入到依赖系统中，供子组件访问。

这里不要加，加下面就够了。# 如果是预检请求（OPTIONS请求），直接返回204响应，最重要是这里。

1.template里需要用$t("xxx")而不是 this.$t("xxx"),否则部分情况找不到$t。2.script 根路径需要使用 $i18n.$t ,不能用this。3.script组件定义可以使用this.$t。

I had the same problem, here is what fixed it for me:close the project inintellij. closeintellij. go to the project folder and delete the.ideafolder restartintellijand open the project (wait for the indexing to finish) and it would work.

操作I. 创建应用登录阿里云官网 https://www.aliyun.com/。 前往 Node.js性能平台控制台创建新应用输入应用名demo,记录下App ID和App Secret，后面可以从应用界面的设置中查看该设置。II. 服务器部署 Node.js 性能平台a. 安装 Node.js 性能平台所需组件安装版本管理工具 tnvm，安装过程出错参考：https://github.com/aliyun-node/tnvm wget -O- https://...

「来源: ｜Vue中文社区 ID：vue_fe」作者：rexkentzhenghttps://juejin.cn/post/6961203055257714702前言这两天闲来无事，想优化优化项目的启动时间，用了一个下午吧，将项目启动时间从48秒优化到14秒，大约70左右，效果还是有的，而且仅仅用了一行代码。会讲一下找到这行代码的过程，如果没有耐心可以直接跳转到文章底部，直接看结论即可。项目背景项目就是简单的Vue项目，不过公司内部给vue-cli包了一层，不过影响不大。

项目场景：vue开发的项目，既有移动端又有pc端，但是移动端和pc端展示的内容不一样，同一个组件样式也不一样，移动端展示内容比pc端少，那这个时候在一个项目种怎么做的？解决方式：路由写两份，一份移动端的，一份pc端的，这两份路由地址相同，对应的组件不同，在路由的入口文件里去判断渲染pc的路由还是移动端的路由代码如下：router下的index.js文件import Vue from 'vue';import Router from 'vue-router';import rou

Sentry是一款基于Django实现的错误日志收集和聚合的平台，它是Python实现的，但是其日志监控功能却不局限于python，对诸如Node.js,php,ruby,C#,java等语言的项目都可以做到无缝集成，甚至可以用来对iOS,Android移动客户端以及Web前端异常进行跟踪。我们可以在程序中捕获异常，并发送到Sentry服务端进行聚合统计、展示和报警。　　　sentry官方推荐docker方式安装，使用到了docker-compose。docker至少是1.10...

sentry概述#　　Sentry是程序的哨兵，它可以监控我们在生产环境中项目的运行状态，一旦某段代码运行报错或者异常，会第一时间把报错的路由异常文件，请求方式 等一些非常详细的信息以消息或者邮件给我们，让我们第一时间知道：程序出错了，然后我们可以从 Sentry 给我们的详细的错误信息中瞬间找到我们需要处理的代码，及时解决异常！官方地址：GitHub - getsentry/self-hosted: Sentry, feature-complete and packaged up for lo

package.json"start": "cross-env ENV_MODE=prd node scripts/start.js","dev": "cross-env ENV_MODE=prd node scripts/start.js",需要cross-envwebpackconst webpack = require('webpack');new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stri.

一.什么是前端工程？一个类似的术语是软件工程（Software Engineering）：Software engineering is the systematic application of engineering approaches to the development of software.将工程方法系统化地应用到软件开发中，就叫软件工程。那么，紧接着又有两个问题：工程方法是什么？ 系统化怎么理解？工程是指使用科学原理设计和制造机器、结构等，比如修桥、铺路、建隧道、造车、盖

导读本篇文章将介绍”集合视图”,App Widget 复杂布局的实现App Widget 小部件系列其他文章链接App Widgets 详解一 简单使用App Widgets 详解二 Configuration ActivityApp Widgets 详解三 Activity中添加App WidgetsApp Widgets 详解四 RemoteViews、RemoteViewsService和RemoteViewsFactoryRemoteViews、RemoteViewsServ

https://tools.keycdn.com/http2-test

1 App Widget简介App Widget是应用程序窗口小部件（Widget）是微型的应用程序视图，它可以被嵌入到其它应用程序中（比如桌面）并接收周期性的更新。你可以通过一个App Widget Provider来发布一个Widget。本文参考Android官方文本，先介绍App Widget的主要组件，然后再以示例来详细说明。2 App Widget主要的相关类介绍2.1 AppWidgetProviderAppWidgetProvider继承自 BroadcastRe.

RemoteViews所支持的View类型如下图所示(注意不支持下图中View的子类)：RemoteViews所支持的View的类型RemoteViews没有提供findViewById方法，因为RemoteViews在远程进程中显示，因此无法直接访问里面的View元素，而必须通过RemoteViews所提供的一系列set方法来完成，部分set方法如下所示：1：在Notification中的应用示例代码如下： private Button button;

此文记录资源预加载在我们项目的实践，技术难度不算高，重在介绍一套技术方案的诞生与实施，其中都进行了哪些思考，依据什么来做决策，如何进行效果评估，等等。为读者在制定技术方案时提供一定启示。背景资源预加载机制很好理解，即在用户访问页面之前，提前加载好相应的资源。这样用户在访问页面的时候，省去了加载资源的时间，达到“秒开”的效果。资源预加载的方案很多，本文所述的是纯web下的资源预加载，区别于利用容器做资源预置。所以采用的技术都是纯web方案。另外还有一个背景：项目是SPA架构，webpack+v

link rel属性 preload prefetch区别使用<link rel="preload" href="xxx" as="xxx"><link rel="prefetch" href="xxx" as="xxx">测试方式借助 console.time() console.timEnd() 计时，计算时间<script> console.time('a'); console.time('b')........ windo

什么是 SSRSSR 顾名思义就是Server-Side Render, 即服务端渲染。原理很简单，就是服务端直接渲染出 HTML 字符串模板，浏览器可以直接解析该字符串模版显示页面，因此首屏的内容不再依赖 Javascript 的渲染（CSR - 客户端渲染）。SSR 的核心优势：首屏加载时间：因为是 HTML 直出，浏览器可以直接解析该字符串模版显示页面。 SEO 友好：正是因为服务端渲染输出到浏览器的是完备的 html 字符串，使得搜索引擎 能抓取到真实的内容，利于 SEO。SSR .

优化用户体验质量是所有网站取得长期成功的关键。通过与数百万网络开发者和网站所有者的持续交流和协作，我们在 Google 开发了许多实用指标和工具，以帮助企业所有者、市场营销人员和开发者发掘改善用户体验的机会。然而，丰富多样的指标和工具也给许多人带来了各种优先级、明晰度和一致性方面的挑战。今天，我们为各位介绍一项名为 Web Vitals 的新计划，此计划的发起方为 Google，旨在提供各种质量信号的统一指南，我们相信这些质量信号对提供出色的网络用户体验至关重要。Core Web Vitals

/deep/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，开始没太注意 ，以为是组件css的写法，后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存在着一个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不

这个选项决定了 script 标签的引用顺序。默认有四个选项，'none', 'auto', 'dependency', '{function}'。 'dependency' 按照不同文件的依赖关系来排序。 'auto' 默认值 'none' {function} 不懂 'dependency' 按照不同文件的依赖关系来排序改为auto 注释都可以npm run build打包成功...

 vue-cli脚手架出到了4.3.1版本，目前主推通过create命令来新建项目。与过去的vue-cli2的init命令不同的是：create命令脚手架建完的项目webpack为4，而init采用的模板中引用的webpack版本还是3。（单独安装最新的@vue/cli-init命令安装的webpack版本也是3）  为了解决构建效率和最新插件兼容性的问题，本篇文章记一下怎样把最开始通过init命令建的webpack3的项目升级为webpack4。升级依赖  为了避免手动编辑package.jso

推荐先阅读 webpack 入门教程之后再来阅读本文。Webpack 4 和单页应用入门 手摸手，带你用合理的姿势使用 webpack4 （上）本文为手摸手使用 webpack4（下），主要分为两部分：怎么合理的运用浏览器缓存 怎么构建可靠的持久化缓存默认分包策略webpack 4 最大的改动就是废除了 CommonsChunkPlugin 引入了 optimization.splitChunks。webpack 4 的Code Splitting 它最大的特点就是配置简单，如果你的

前几天 webpack 作者 Tobias Koppers 发布了一篇新的文章 webpack 4.0 to 4.16: Did you know?(需翻墙)，总结了一下webpack 4发布以来，做了哪些调整和优化。 并且说自己正在着手开发 webpack 5。Oh you are still on webpack 3. I’m sorry, what is blocking you? We already working on webpack 5, so your stack might be o

css提取 （mini-css-extract-plugin）1、安装 npm i mini-css-extract-plugin -D // 或 npm i extract-text-webpack-plugin@next -D 2、webpack配置文件引入及配置： const MiniCssExtractPlugin=require('mini-css-extract-plugin') // const ExtractTextWebpackPlugin=re

1.需要使用@next，否则报错，prugecss原来的不支持webpack4npm i purgecss-webpack-plugin@next -D2.purgeCss依赖于MiniCssExtractPlugin所以也要安装相关依赖npm i -D mini-css-extract-plugin@1.6.0为什么指定了这个版本没用最新版本，因为我们发现最新版本有兼容问题如下TypeError: Invalid value used in weak set at Weak..

接上篇：实战 webpack 4 配置解析三WEBPACK.PROD.JS 解析现在让我们看看我们的webpack.prod.js配置文件，它包含了我们正在处理项目时用于生产构建的所有设置。它与webpack.common.js中的设置合并，形成一个完整的 webpack 配置。// webpack.prod.js - production buildsconst LEGACY_CONFIG = 'legacy';const MODERN_CONFIG = 'modern';...

本项目提供了 svg 压缩处理优化功能。基于svgo实现。npm run svgo我们很多网上下载或者Sketch导出的 svg 会有很多冗余无用的信息，大大的增加了 svg 的尺寸，我们可以使用svgo对它进行优化。比如下图是用Sketch导出的一个 svg我们可以执行npm run svgo无用的信息都被处理掉了。更多详细的配置 可以在/src/icons/svgo.yml中进行配置。...

https://developers.google.com/web/tools/workbox/modules/workbox-webpack-pluginInjectManifest PluginYou can add the InjectManifest plugin to your webpack config like so:// Inside of webpack.config.js:const {InjectManifest} = require('workbox-webpa

webpack-chain一、修改entry和outputchainWebpack: config => { config.entryPoints.clear() // 会把默认的入口清空 config.entry('main').add('./src/main.js')//新增入口 config.entry('routes').add('./src/app-routes.js')//新增入口 config.output .path("dist")

背景介绍：为了提高React应用的启动速度、离线访问能力, 做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本，并且做到监控版本更新能力的靠谱性。终极方案：采用serviceWorker的成熟方案workBox通过Webpack的workbox官方插件workbox-webpack-plugin做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本, 通过Google Analytics做到监控版本更新能力的靠谱性（上报应用版

iOS 15 Notifications - 简书通知摘要作者：欧阳蓝缺链接：https://www.jianshu.com/p/9f1d0e1f47ef来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

最近看有些网站上的jpg格式的图片在呈现的时候，有两种方式，一种是自上而下扫描式的，还有一种就是先是全部的模糊图片，然后逐渐清晰(就像GIF格式的交错显示)。一、基本JPEG(baseline jpeg)和渐进JPEG图片的尺寸大小：张鑫旭个人博客看到：同一张jpg图片，如果保存为基本式和渐进式那个尺寸更小呢？根据我拿3终不同风格图片做测试，发现，百度百科中所说的渐进式图片的大小比基本式的小是不准确的。其中，两者大小关系基本上没有什么规律。下面是他的测试结果：图片缩略图 测

本项目提供了 svg 压缩处理优化功能。基于svgo实现。npm run svgo我们很多网上下载或者Sketch导出的 svg 会有很多冗余无用的信息，大大的增加了 svg 的尺寸，我们可以使用svgo对它进行优化。比如下图是用Sketch导出的一个 svg我们可以执行npm run svgo无用的信息都被处理掉了。更多详细的配置 可以在/src/icons/svgo.yml中进行配置。...

今天来聊聊pkg.module字段的功能以及使用场景。在谈pkg.module之前，让我们先来了解一个和它有着紧密关系的概念 ——Tree Shaking。什么是 Tree Shaking？让我们通过两个小例子来了解。假设我们有以下两个文件：// math.jsexports.add1 = function (x) { return x + 1;}exports.add2 = function (x) { return x + 2;}// app....

转载于:JavaScript内存泄露，闭包内存泄露如何解决 - 一粒一世界 - 博客园JavaScript 内存泄露的4种方式及如何避免简介 什么是内存泄露？ JavaScript 内存管理 JavaScript 内存泄露 Mark-and-sweep 三种类型的常见 JavaScript 内存泄露 1：意外的全局变量 2：被遗忘的计时器或回调函数 3：脱离 DOM 的引用 4：闭包 Chrome 内存剖析工具概览 Timeline Profiles

MongooseMongoose就是一套操作MongoDB数据库的接口，而Egg中有对应的插件egg-mongoose。安装$ npm install egg-mongoose --save配置改变Egg项目中的配置文件{workplace}/config/plugin.js中来启用 egg-mongoose 插件:exports.mongoose = { enable: true, package: 'egg-mongoose',};Egg连接mongoose

function hookAJAX() { XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototype.open; var customizeOpen = function (method, url, async, user, password) { // do something this.nativeOpen(method, url, async, user, password); };.

The Visual Workspace | Whimsical