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。这又是什么玩意？实话说在这里踩坑时间是最多的，但是解决方案又是令人窒息的简单…都怪自己没有好好看文档

总结

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

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