Open falm opened 6 years ago
点赞👍。一点小小的建议:有一些错别字,特别是CSS拆分那里,导致有些句子不通顺,如果创建Issue前检查一遍,那就更棒了。
@Lupeipei 已修改,谢谢您的建议。
uglify,rollup 一个都没提到。。。,性能优化 体积只是其中一小部分,,还有加载,缓存。。
@100cm 嗯 这次只提到了打包工具,后续会逐渐出其他系列的,欢迎Watch & Star。😊
@simbawus 把文章写的深入一些才值得star 和 watch。
vue,router,vuex放到cdn会更好
现代前端开发,已经进入工程化阶段,但是基于浏览器的前端项目的在工程化后,往往会遇到一些性能问题,例如中大型前端项目,依赖库和项目本身的资源过大,加载慢,首屏渲染时间长等性能问题,严重影响用户体验,这个时候工程化的项目就需要适当的进行优化,本文分享一下,我们前端项目已经或将要在打包工具这一层级的优化方法。
打包性能分析
要做性能优化,首先要知道优化哪些部分,也就是哪些比较慢,通常情况下,最直观的方向就是,项目整体打包文件的大小的问题,如果资源过大,那么网站性能肯定是上不去的。我们这里使用Webpack Bundle Analyzer 这个工具来分析一下,项目打包后各个模块所占用的资源情况。
首先安装:
yarn add webpack-bundle-analyzer —dev
然后在webpack 配置文件中,将webpack-bundle-analyzer 加入到插件上:
之后我们在production模式下构建项目,
NODE_ENV=production yarn build
BundleAnalyzerPlugin就会对资源进行分析,然后会开起一个网页浏览分析结果:第三方库CDN
通过分析结果我们可以看到,第三方库如Lodash 占据了资源文件不小空间,这个我们就可以使用webpack本身提供的external功能,通过CDN加速的lodash。
配置如下:
然后我们在项目的入口html中收到加入CDN link:
公共模块提取
优化了上一部分的CDN,其实项目当中有些没有CDN的第三方资源我们也可用通过提取公共模块的方式,把它们单独的打包成一个文件,这样就可以让main.js的体积进一步减小,浏览器也能够并行加载资源。
这里要使用的就是Webpack提供的CommonsChunkPlugin 插件
配置:
配置之后,webpack就会将 react一系列的资源,单独打包成一个vendor.js文件来加快网页加载速度。
CSS拆分
最后一个我们要说的性能优化是CSS,在我们的前端项目中使用了 css modules和react技术,项目中的cs s就会打包在js文件当中,当网页加载好js代码后,再作为内联样式渲染,这里就带来了一个弊端,样式的渲染不能和js代码的加载同时进行,需要等到js加载完后才可以,解决办法就是将项目中的所有css文件,提取出来作为一个外联的css文件,这样网页在加载时就会首先加载样式表文件,然后进行解析渲染,不需要等js加载完成。
那么我们要做的就是使用extract-text-webpack-plugin 插件来做到样式表提取。
安装:
yarn add extract-text-webpack-plugin —dev
配置:
最后的效果就是我们从原来输出一个大的主文件,变成了三个文件,main.js的大小533kb减小到了264kb,少了一倍。
结尾
以上介绍的三种打包工具层面的优化,我们就可以看到 路由和webpack本身已经使用了code split技术将我们的页面拆分成了数字编号的小文件,这就是按需加载。前端性能优化中资源大小的优化属于第一步骤,后续更深入的优化,包括运行时优化,渲染优化,数据加载优化等等,之后我们有机会再来介绍。
广而告之
本文发布于薄荷前端周刊,欢迎Watch & Star ★,转载请注明出处。
欢迎讨论,点个赞再走吧 。◕‿◕。 ~