00:01
最后呢,我们总结一下,我们最近做一些优化,高级优化呢,对于我们开发者来讲是非常重要的。第一个他能实际对我们这个项目角度家呢做一些优化,第二个呢,能够在面试中啊,我们可以回答一些优化手段,从而呢能让自己拿到更高的薪资,所以这一块呢,大家必须要好好准备。我们一共从四个角度去提出对它优化。提升开发体验,使用map来对它进行开发时,用更加的错误的、更加准确的错误提示。那么我们具体配置就是在开发模式下我们用的是trip model STEM,在生产模式下用的是。除此之外还有什么E啊,英line啊等等对搜map的一些值,那么那些值的话呢,感兴趣的可以了解,不感兴趣的只要记住那两个就好了,She model s map和map。好呃,第二个呢,我们提升了we派的打包速度,因为将来呢,随着代码越来越多啊,派S构建速度会越来越慢,我们要想办法提升它速度。
01:03
首先,开放模式下,我们希望它重新编译,速度快,用了HR功能。它能让我们增量更新,比如说只更新那个更新的部分,那么其他部分有缓存,这样的话呢,更新速度会很快。这个位置就是好为处啊,然后呢,样式呢,因为style的原因,可以自然天然具备HMR,而JS呢,需要写一段特殊代码才能够具备HMR功能。但是将来实际开发的时候,我们后面搭建rar脚手架或者V脚手架,我们都会使用相应的插件来自动完成这个HR,所以实际开发的时候是很简单的。第二个呢,我们使用的one of,我们希望就是咱们的资源呢,不要所有的都遍历处理啊,只处理一个就好了,这样的速度更快。配置完of就好。还有include,排除或者是只检测某些文件,从而让它处理的文件范围更小,那么速度更快。使用cash对咱们JS一些常时耗时操作呢,进行缓存。
02:03
这样呢,第二次打包速度就会快很多了。使用多进程也是对GS的一些任务做处理,那么多个进程一起工作,速度更快。但是仍然需要注意的就是啊,大家开发的时候一上来不要先用过进程。因为多进程打包的时候,它开进程开启和通信都会开箱,这个开箱往往很大。而一开始你的项目代码不够大的话,那么这个多进程会极大的影响到你导的速度,所以一一上来不建议使用。建议的是,就是当我们项目代码很庞大的时候,的确感觉到这个打包速度很慢,那么我们才可以开启多继成来前后对比一下有没有提升,有提升就保留,没提升就删掉,再等项目再大一点。好,减少代码体积呢?我们有出这个,一上来就开启了,它可以自动的去除咱们JS中未经使用的代码,从而让代码体积更小。这个功能是非常有帮助的。
03:02
同时我们使用BA打包的话呢,它呢,每次会为打包的一些串行注入一些辅助代码。我们通过使用这个插件呢,可以让辅助代码呢,都从这个插件中去引入,从而让整体体积更小。同时我们对本地图片使用的压缩,那么压缩程度是非常明显的,体积小,速度就是快。但是仍然需要注意的就是,如果你项目中的图片都是在线链接,那么就不需要用它了,所以你在用用之前要先斟酌一下你本地有没有大量图片。就一张两张那就都无所谓啊,比较多,那么用它才有意义。我们最后的优化代码预习性能,使用代码分割,将将代码的分成多个JS文件,最开始呢,输出的时候只有一个JS文件,体积太大了。分成多个JS,那么我们将来体积小,并行加载自动派,同时通过imports动态导入,那么我们也可以对某些文件进行单独分割。
04:00
这一点呢,主要体现在路由哪个载上,将来我们会对路由组件通过import来动态导入。这个呢,我们后续开发项目的时候会给大家讲到。从而让我们资源体积变得小啊,变形加载速度快,而且不用的资源一上载不加载,那么我们需要加载资源就更少,从而速度更快了。那么后面用的资源的加载速度必然会比较慢,所以我们会通过pro和对它进行优化,让资源的提前加载,从而用的时候可以直接用。那么性能更好。但是他们的问题就是兼容性比较差。所以要注意。然后呢,我们还考虑到缓存啊,缓存就是第一个,我们需要考虑到就是将来资源一旦更新了,希望能自动请求更新的资源。第二个就是将来资源发生变化,只变化这个。变化的资源,不,不变的资源呢,继续使用缓存,这里面呢,我们通过配置可harsh来做好第一个点,通过配置runtime创来做好第二点,从而让缓存更加持久。
05:06
更加好用。下面呢,我们还考虑的这个兼容性问题,用的cos对代码进行兼容性问题,从而达到啊这个兼容性更好,能在第一步放定去运行。而且我们实现的是按需下载解,极大的解放到我们双手,我们只需要写代码就好了,它会自动加载这个兼容性的。最后呢,我们想体验更好一点,我们可以使用PW让我们网站离线的访问。但是它也是这个兼容性问题比较严重啊,所以也是要去斟酌性的去考虑使用。好了,我们从多角度去对我们的pad提出的优化,那么希望大家能够学习到一些东西,同时能在面试中很好的回答这个问题。后续我们在项目和原理的时候,我们也讲了一些新的优化措施,大家后面可以结合起来一起来看。好了,这以上呢,就是我们的高级优化了。
我来说两句