react博客开发记录之首屏优化

2023年3月18日 88次阅读 来源: MD纸一张

总结一下我所知道的首屏优化的方案：

  1. 通过webpack的UglifyJsPlugin插件对代码进行压缩
  2. 提取第三方库
  3. 通过webpack实现按需加载
  4. 通过服务器对代码进行gzip压缩
  5. 服务器端渲染首屏

下面将具体介绍一下这几种方案的使用

** 1、通过webpack的UglifyJsPlugin插件对代码进行压缩 **

通过简单的UglifyJsPlugin配置可以将代码压缩至原来的一半大小

new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })

** 2、提取第三方库 **

像 react , redux之类的库和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置：

entry:{
        vendor:['react','redux']
    },
plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
  ]

这样我们只需要在html中引入vendor.js就行了

** 3、通过webpack实现按需加载 **

通过与react－router＋webpack配合我们可以实现按需加载（react router文档传送门），上一段代码：

<Route path='/message' getComponent={
    (nextState ,cb) => {
        require.ensure([] , (require) => {
            cb(null,require('./routes/message/index.jsx'));
        },'message');
    }
} />

以上是博客demo留言区的路由，再看webpack：

output:{
        path: __dirname+'/bundle/',
        publicPath:'/bundle/',
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js'
    }

我们只需要在output中配置好文件名就行

** 注意 **：publicPath是设定以http请求的方式请求静态资源的路径

通过分割我们就不必要一次将整站加载下来，大大的减少了首屏加载时间，当然个人觉得如果页面不多或者文件本身不大没必要使用按需加载，gzip或许更适合

博客demo实现了按需加载－。－，可以到博客demo在线地址打开控制台在Network里查看。

** 4、通过服务器对代码进行gzip压缩 **

经过webpack的UglifyJsPlugin插件后，博客demo还有1.15M对于我来说也是个不小的数目，这时候不得不感叹，gzip真心强大，经过gizp压缩，博客demo变成了300k左右。

关于nginx配置可以参考谷歌或百度一下的答案

个人总结

如果应用不大，使用UglifyJsPlugin＋gzip就能满足首屏的要求，没有必要折腾按需加载，按需加载适用于较大型的页面多的应用，强行按需加载只会增加请求量，gzip压缩效果也不会那么明显，谨慎使用按需加载

点我看demo源码，如果对你有点帮助，希望能随手star

[原文地址：http://blog.mdzzapp.com/][1]
[1]: http://blog.mdzzapp.com/#/article/%E5%8D%9A%E5%AE%A2%E5%BC%80%E5%8F%91%E4%B9%8Breact%E9%A6%96%E5%B1%8F%E4%BC%98%E5%8C%96?_k=kdjtut
欢迎各种评论，补充和指导

    原文作者：MD纸一张
    原文地址: https://www.jianshu.com/p/a72b1c9d8c32
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞