1M带宽云服务器，理论最大下载速度128kb/s现在前端项目搭建后的文件动辄几M大小，所以用户来访问不会超过10s吗？天呐，怎么会有那么好心的用户等你这么久，竟然已经溜走了？那么如何优化访问速度呢，我先详细讲解一下优化后的服务器（3s左右打开）和对比。优化前后首页访问速度。左边是优化前的访问速度（20s以上），右边是优化后的访问速度（竟然可以奇迹般的达到2s）。如何扩展解决方案？这辈子，我绝对不会为了突破1M带宽限制而扩建优化建设。我首先想到的是缩小构建包的大小，然后减少首屏加载的资源，然后使用CDN加速静态资源访问。1、如何减少Build包体积项目中使用了很多第三方库（react、react-router、antd等）。提取这些库可以减小构建包的大小。webpack中的externals配置在打包的时候可以忽略这些第三方包，从而有效的减小包体积//webpack.config.jsmodule.exports={//通过externals配置，设置react,react-dom,react-router，antd打包时不参与externals的构建：{//左边的键表示导入时的包名//右边的值表示从外部导入导出的变量名——这个必须是正确编写react:'React','react-dom':'ReactDOM','react-router':'ReactRouter',antd:'antd',}};那么如何引用这些导出的包呢？在html文件中，使用脚本标签导入这些包。注意上面html模板中引用了animate.min.css和antd.min.css，不仅js有第三方包，也有css，那么css也可以用externals导出吗？答案是不！如何处理这些第三方css库？不要慌，在使用antd的时候，官方说使用babel-plugin-import插件可以达到按需加载的效果。比如你只使用Button组件，那么可以只导入Button相关的js代码和css代码，这样可以减少构建后的文件体积，参考这个按需加载的导入方法，看看如何使用babel-plugin-import//这个插件的原理是找到libraryName对应的包名并导入，重写这行代码写吧//例如：import'animate.css'会转换为import'./empty.css'//将三方包指向一个空css文件，打包后空css文件会被打包，即不会增加包的大小//.babelrc.jsmodule.exports={plugins:[['import',{libraryName:'animate.css',customName:name=>'./empty.css',},'animate.css',],['import',{libraryName:'antd/dist/antd.less',customName:name=>'./empty.css',},'antd/dist/antd.less',],],}2.如何减少首屏加载资源减少首屏加载资源就是延迟首屏加载不必要的资源，达到优化加载速度的目的。一个站点可能有多个路由，所以除了当前路由相关路由的资源需要加载，其他路由的内容要懒加载。React提供了React.lazy方法来延迟加载组件。React.lazy必须包裹在React.Suspense标签中。使用延迟加载需要结合动态import()的语法，使用Babel的plugin-syntax-dynamic-import插件可以支持。//一种动态加载组件的方式//当路由引用组件时，使用该方法将需要引用的组件包裹起来/*loadable.js*/importReactfrom'react';constComp=React.lazy(()=>import(/*webpackChunkName:'preview'*/'./index.js'));exportdefault()=>;3、通过CDN加速访问静态资源我们知道通过CDN访问静态资源可以加速资源获取，那么去云服务商开通CDN服务怎么样呢？没必要这么麻烦。市场上有免费的CDN镜像。你可以使用他们提供的东西，并且可以节省一些费用。免费好用的cdn加速服务https://www.bootcdn.cn/https://cdnjs.com/最后看一下构建包的体积。首先，只关注bound.js。左边是未优化的构建结果js大小为1.42M，所以第一次加载需要11s。右边是优化后的构建结果。js文件总共只有486k，首页资源只有185k，所以理论加载速度只需要2s。这只是js的加载对比，加上css的加载，性能提升更明显。结论本次优化所用的项目经过在github上的不懈努力，终于将url的初始加载速度降低到了3s。其实还是有优化空间的，需要我们多去探索。
