重构之路
web999_Z
追求技术的前端攻城狮
展开
-
重构之路:配置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...原创 2019-02-15 16:11:33 · 807 阅读 · 0 评论 -
重构之路:开篇
原因 当前公司里个类后台的网站以前一直是jQuery写的,但是在越来越多的需求下,使用jQuery项目的缺点就渐渐的暴露出来了,大量的获取DOM元素来操作和冗余的代码,让我越来越难维护,所以在leader的同意下,我开始了重构之路… 技术栈选择 作为新时代的前端,重构项目当然需要选择对应的前端技术,Angular,React,Vue三足鼎立,各有各的好处,但是技术栈的选择需要看项目是怎么样的...原创 2019-02-11 16:21:20 · 108 阅读 · 0 评论 -
重构之路:webpack打包体积优化(超详细)
开始 这一章讲打包体积优化,这个也算是最重要的一章了,之前可是花了很多时间来优化打包体积的,不同webpack之间还不一样,所以也算踩了很多的坑,这一章会比较长。 因为项目中需要使用到antd,所以我们先引入antd先。这里有一点要说一下,antd v3.9.0之后在打包时会有一个icons的包非常大,而且目前并没有很好的解决办法,所以我们使用的是3.8.2版的。 关于这个问题,GitHub上也有...原创 2019-02-22 16:11:17 · 2691 阅读 · 1 评论 -
重构之路:开始配置webpack
开始 现在开始创建项目了,安装node什么的一大堆我就不说了,网上很多,我这里使用的是node版本v10.15.0,yarn的版本是v1.12.3。 初始化webpack 首先在创建的目录下面执行 yarn init -y yarn add webpack webpack-cli -D 我这里使用的版本是webpack4.29.0,然后在目录下创建webpack.config.js这个文件,在根目...原创 2019-02-12 15:12:54 · 150 阅读 · 0 评论 -
重构之路: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] //顺便写一个一行代码实现数组...原创 2019-02-13 11:19:07 · 405 阅读 · 0 评论 -
重构之路:webpack区分生产环境和开发环境
开始 我们现在的配置都是写在一个webpack.config.js文件夹里,但是实际上,我们在开发环境和生产环境中使用的配置是不一样的,比如生产环境中我们需要包的体积不能很大,不然在线上响应会变慢。所以我们需要将生产环境和开发环境分开来。 cross-env 在node里,我们有一个process对象,它里面包括了node的一些信息,env和它的一个属性,但是并没有process.env.NODE...原创 2019-02-19 11:27:11 · 826 阅读 · 0 评论 -
重构之路:配置css/less,img等loader和dev-server
开始 这章我们先把一些css和img给配置了,还有热加载的一些插件。 首先我们先配置控制台的命令,我们每次打包的时候都需要执行webpack这条命令,然后在打包后的文件夹里打开index.html进行预览,我们能不能直接在修改的时候直接在网页上预览呢?当然可以,下面开始配置。 配置devServer 先在控制台执行: yarn add webpack-dev-server -D 然后去webpa...原创 2019-02-14 15:11:05 · 245 阅读 · 0 评论 -
重构之路:打包速度优化和结尾
开始 先来说一下,可能有些人会说怎么这么快就结尾了?其实全部的重构肯定是还没完成的,这里说的结尾是前期的配置已经基本完成了。本来还想写一个webpack打包速度的博文,但是发现打包速度的优化可以写的并不多(也可能是我孤陋寡闻…),下面大概写一下。 happypack webpack本来是单线程的去打包,happypack的速度优化是通过多个线程来进行打包,所以打包速度会比较快。 需要先去执行: y...原创 2019-03-06 16:39:43 · 159 阅读 · 0 评论