分类 代码如诗 下的文章

最近在给组件底层脚手架升级，同时也把webpack4升级到了webpack5，但是发现升级后打包会生成LICENSE文件：

生成的LICENSE文件

查阅官网资料，找到了解决办法：

https://webpack.docschina.org/plugins/terser-webpack-plugin/#extractcomments

在webpack.config.js中修改配置：

const TerserPlugin = require("terser-webpack-plugin")
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin({
           extractComments: false, //不将注释提取到单独的文件中
        })],
    },
}

修改之前，再次打包即可。

饿了么表格性能一直是有些问题的，特别是使用了固定列，表格会把固定列克隆出来一份，这样会导致渲染很多冗余DOM，随着数据量的增加，冗余DOM也会变多，如果固定列再使用插槽，里面嵌套复杂的组件，性能会下降更多。

最近在做表格的性能优化，发现如果不考虑IE浏览器的情况，可以使用 position: sticky 来实现固定列。

- 阅读剩余部分 -

Moment.js是一个轻量级的js时间处理类库，其使用简单，方便了日常开发中对时间的操作，提高了开发效率。虽然大家经常用，但是我这次在项目中使用了一次，出现了严重的bug，下面就简单的把bug描述一下！

- 阅读剩余部分 -

根据官方文档可以这么配置：

import Vue from 'vue';
import Element from 'element-gui';
import 'element-gui/lib/theme-chalk/index.css';
Vue.use(Element, { size: 'small', zIndex: 3000 , duration: 5000 });

但是实际项目中，可能需要针对某个组件进行一些属性的全局配置，这时候就可以使用下面的方法：

import Vue from 'vue';
import Element from 'element-gui';
import 'element-gui/lib/theme-chalk/index.css';

ElementUI.Tabs.props.type = { type: String, default: 'border-card' }
Vue.use(ElementUI);

但是某些情况，上面方法可能不太适应，例如给所有 el-input 添加 placeholder。

在说Electron进程通信的时候，先说一下Electron中的两种进程：主进程和渲染进程。

主进程通过创建 BrowserWindow 实例来创建网页。 每一个 BrowserWindow 实例在其渲染过程中运行网页，当一个BrowserWindow 实例被销毁时，对应的渲染过程也会被终止。简单来说，一个客户端就是一个主进程。

渲染进程只能管理相应的网页，一个渲染进程的崩溃不会影响其他渲染进程。渲染进程通过 IPC 与主进程通信在网在页上执行 GUI 操作。 出于安全和可能的资源泄漏考虑，直接从渲染器进程中调用与本地 GUI 有关的 API 受到限制。简单来说，一个页面就是一个渲染进程。

注意：主进程管理所有网页及其对应的渲染进程。

- 阅读剩余部分 -

为啥会有这个奇葩的需求呢？其实这个需求还是有很多场景存在的！

例如我在做的可视化平台这个产品，是分WEB版和Electron客户端，使用的都是一套Vue的代码，WEB版是方便线上开发使用，Electron是方便离线使用（离线的时候读取本地数据，在线的时候拉取服务端数据）。在WEB端，我需要给用户一个下载Electron端的地址，但是我在Electron端的时候，就不希望在显示这个链接，所以就需要做一个客户端的检测！对，就是userAgent检测！

var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf(' electron/') > -1) {
   // Electron-specific code
}

通过上面的代码，就可以检测到现在代码是在Electron端运行还是在WEB端运行，我本地使用的是Electron 9，可以正常使用。

  1. 1
  2. 2
  3. 3
  4. 4
  5. ...
  6. 11