asdqwe_zxc的博客

原创 React+antd在线上动态更换皮肤主题

开始因为项目里一个更换皮肤的功能，虽然antd官网给出了更改主题的方法，但那是静态的，没办法在线上更换，然后发现网上在这方面的资料也并不多，这个业务难道不是应该很普遍吗？然后我就花了一些时间去解决了这个问题，并将踩过的坑写出来，再给出解决方案。antd-theme-webpack-plugin这个工具是我在网上找到并发现是比较好用的。下面是这个包的文档，但这个文档实际上写的并不清楚，我在按文...

原创 重构之路：打包速度优化和结尾

开始先来说一下，可能有些人会说怎么这么快就结尾了？其实全部的重构肯定是还没完成的，这里说的结尾是前期的配置已经基本完成了。本来还想写一个webpack打包速度的博文，但是发现打包速度的优化可以写的并不多（也可能是我孤陋寡闻…），下面大概写一下。happypackwebpack本来是单线程的去打包，happypack的速度优化是通过多个线程来进行打包，所以打包速度会比较快。需要先去执行：y...

原创 重构之路：webpack打包体积优化（超详细）

开始这一章讲打包体积优化，这个也算是最重要的一章了，之前可是花了很多时间来优化打包体积的，不同webpack之间还不一样，所以也算踩了很多的坑，这一章会比较长。因为项目中需要使用到antd，所以我们先引入antd先。这里有一点要说一下，antd v3.9.0之后在打包时会有一个icons的包非常大，而且目前并没有很好的解决办法，所以我们使用的是3.8.2版的。关于这个问题，GitHub上也有...

原创 重构之路：webpack区分生产环境和开发环境

开始我们现在的配置都是写在一个webpack.config.js文件夹里，但是实际上，我们在开发环境和生产环境中使用的配置是不一样的，比如生产环境中我们需要包的体积不能很大，不然在线上响应会变慢。所以我们需要将生产环境和开发环境分开来。cross-env在node里，我们有一个process对象，它里面包括了node的一些信息，env和它的一个属性，但是并没有process.env.NODE...

原创 重构之路：配置react和react-router和antd

开始这章我们来讲怎么配置react和react-router。react首先我们要下载react相关的插件，在控制台执行：yarn add react react-dom -D然后去webpack.config.js里：{ test:/\.(js|jsx)$/,//在这里添加一个jsx exclude: '/node_m...

原创 重构之路：配置css/less，img等loader和dev-server

开始这章我们先把一些css和img给配置了，还有热加载的一些插件。首先我们先配置控制台的命令，我们每次打包的时候都需要执行webpack这条命令，然后在打包后的文件夹里打开index.html进行预览，我们能不能直接在修改的时候直接在网页上预览呢？当然可以，下面开始配置。配置devServer先在控制台执行：yarn add webpack-dev-server -D然后去webpa...

原创 重构之路：webpack配置es6语法

开始之前已经写好了最简单的一个webpack配置，并且已经可以运行js了，但是，新时代的前端肯定要写es6啊，但是我们在index.js里写上es6的语法时，比如：//使用es6里的set和扩展运算符来实现数组去重var set=new Set([1,2,2,3,3,4,4,5,5]);console.log([...set]);//[1,2,3,4,5]//顺便写一个一行代码实现数组...

原创 重构之路：开始配置webpack

开始现在开始创建项目了，安装node什么的一大堆我就不说了，网上很多，我这里使用的是node版本v10.15.0，yarn的版本是v1.12.3。初始化webpack首先在创建的目录下面执行yarn init -yyarn add webpack webpack-cli -D我这里使用的版本是webpack4.29.0，然后在目录下创建webpack.config.js这个文件，在根目...

原创 重构之路：开篇

原因当前公司里个类后台的网站以前一直是jQuery写的，但是在越来越多的需求下，使用jQuery项目的缺点就渐渐的暴露出来了，大量的获取DOM元素来操作和冗余的代码，让我越来越难维护，所以在leader的同意下，我开始了重构之路…技术栈选择作为新时代的前端，重构项目当然需要选择对应的前端技术，Angular，React，Vue三足鼎立，各有各的好处，但是技术栈的选择需要看项目是怎么样的...

原创 开始写博客