React中型项目的优化实践(三)

③ 打包提速

我们通常的优化都是为了用户而优化,但其实为了我们自身能够良好的开发体验,也应该为开发人员优化优化开发体验,打包优化则成了不二之选。

使用DLL为打包保驾护航

由于时间原因,在公司的项目中并没有尝试使用DLL,但是看到网上有不少同学都推荐介绍了它,所以我选择在此提及一下~

webpack DLL的文档--

(https://webpack.docschina.org/plugins/dll-plugin/)

将webpack版本从2.0 → 4.x

由于项目是在差不多一年多以前正式启动的,所以接手的时候是webpack1.x,在刚接手的时候为了懒加载硬是升级到了2.x。

但是到现在发现,2.x好像也不够用了,毕竟已经落下了两个大版本了,更新之后的新特性、新功能或是新优化都应该成为我将项目迁移至新版本的动力。wp4具体的配置细节,在掘金上就见到过挺多同学介绍的,这里我想介绍一下,我是怎么将旧项目迁移到wp4的:

在开始进行版本迁移之前,我设想了两个方案,一个是在原有项目上直接升级并修改配置;第二个方案是新建webpack4项目,搭建好之后将业务代码迁移过来。

经过对成功率以及时间成本的评估,我最后选择的是第二个方案。那么这个新建的项目应该完善到什么程度才能进行迁移呢?我个人是经过以下几个步骤—

搭建项目骨架

这回的项目和之前的都不太一样了,我们没有借助大神们的脚手架来搭建项目骨架了,我们需要自己从零开始一点一点的摸索webpack的用法以及新旧版本的差异。

关于一些基础的知识以及配置十分推荐查阅webpack官网的文档(https://webpack.docschina.org/concepts/)以及一些之前参考过的文章webpack4-用之初体验(https://juejin.im/post/5adea0106fb9a07a9d6ff6de)、webpack 4.0.0-beta.0 新特性介绍(https://juejin.im/entry/5a7abcc26fb9a063523ddbaf)。

相信大家看完这些之后都会对wp的配置有基本的认知,紧接下来就是建目录、装依赖巴拉巴拉。最终我们会得到一个这样的目录结构—

写个Hello World!

我们应该如何判断将项目代码迁入新项目的时机呢?很简单,当这个新项目可以正常的调试或打包一个相应框架的Hello World即可。

拿我们的项目来说,搭建完项目目录以及一些基础配置之后,接下来就是完全模拟原有项目的技术栈,在新的项目中写几个简单的demo页。当然这些demo页并不是随便写的,是带有目的性的,按我这次的经历来说,我写了这么几个文件index.js、App.js、Hello.js、Global.scss、router.js。

剥开非核心依赖,我们最核心的依赖其实就是react & react-router & sass,只要webpack能够正确的解析es6和sass我们就能很大程度的还原旧项目的环境。(babel中与jsx相关的配置在package里)

仔细研读package

上面的demo完成之后,我们新项目就初具雏形了,接下来我们就需要将旧项目package.json迁移到新项目中,这里需要注意的几点是:

① “scripts”中的指令要注意,我们要看里面的每条指令分别有什么作用,然后再思考应该怎么在新项目中写一个功能一样的指令。

② “dependencies” && “devDependencies”旧项目的依赖也应该无缝迁移过来,不过我们可以趁这个机会把没有用到的依赖剔除出去。

③ “babel” || “autoprefixer”等辅助工具的配置也应该与旧项目保持一致。

迁移项目&修修补补

上述步骤都跑通之后,就能删掉原有的demo,将旧项目的所有业务代码都迁移过来。接下来就看着报错,一个一个修复即可。这里遇到这么几个坑,困扰了我许久。页面很顺利的迁移过来了,依赖补全之后也顺利的跑起来了。

但是在dev环境下切换页面老是会404。相信大家看到这里就懂了,我用了history模式的路由,在devServer中应该要加上这样一行配置

好啦,404消灭之后又有新的状况了,静态资源老是引用不到,这是为啥?其实这是因为我们在output的时候没有设置publicPath引起的,在dev的webpack.config中我的output是这样配置的

这个问题解决之后,我们的开发环境算是还原的差不多了。接下来就该踩踩打包的坑了,我遇到的第一个问题就是,打包完成之后,文件夹里面只有打包输出,index.html咋不见了…这说好的不太一样。后面发现是少了copy-webpack-plugin(https://github.com/webpack-contrib/copy-webpack-plugin)

加上这个依赖之后,我们public文件夹的内容就会乖乖的在dist里面出现。但紧接着又出现新的问题了,第二次打包的时候,怎么dist没有被清空呢?和上面一样,年轻的我少用了一个插件clean-webpack-plugin(https://github.com/johnagan/clean-webpack-plugin)

完成上述配置后,每次打包webpack都会清空dist文件夹,并且在打包完成之后,将public中的内容复制到dist。好了看来应该可以了,但是在本地开了个服务器跑页面的时候发现,各种静态资源404。这又是什么玩意?实话说在这里踩坑时间是最多的,但是解决方案又是令人窒息的简单…都怪自己没有好好看文档

总结

好了,不知道有多少同学会看到这里,先谢谢大家看我在这唠叨一堆~各类优化的方案在网上看了好多好多,但是好像大家都只讲方案没有涉及实践,等到自己真正去玩的时候才发现,其实优化没有想象中那么简单,要兼顾原有的,又要尽量使用更新更好的,很多时候都会在夹缝中取舍。

其实,能够优化的还有很多很多,请求方面、业务方面甚至是代码写法…都是可以优化的,但是这些怎么能一蹴而就呢?还是得走一步,看一步,选择最适合自家项目的优化方案才是最佳方案~

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180613G21M3F00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券