webpack4搭建react, 性能优化

前几天用webpack4配置了下react,这里主要说下碰到的一些问题,细节可以看源代码

  • hash缓存

    js和css都使用了chunkhash缓存,但是出现一个问题就是,无论修改css文件或者js文件,都会导致chunkhash改变,这显然不是我们需要的。

    然后用mini-css-extract-plugin将css提取出来之后使用contenthash,这样对内容进行hash命名。

    但是出现一个问题就是每次css改变,js的chunkhash也会改变,不知道这个是一个bug还是一个feature.
    因为其他的版本是不存在这个问题的,但是我目前这个版本出现了这个问题,之前整了个demo没有这个问题,查看github代码库的说法是推荐contenthashchunkhash的保留只是为了兼容。
    所以对js也进行contenthash命令, 这样每次css修改都不会影响js的hash命名。

    关于hash命名的区别请前往

一些问题

  • 资源压缩

    代码没有被很好的压缩,压缩了js发现css没有压缩.mini-css-extract-plugin并没有给我压缩css,所以css压缩使用了optimize-css-assets-webpack-plugin.

    但是用了这个之后,发现js没有压缩,fuck中。。然后再重新手动压缩(webpack4约定大于配置嘛,好耳熟).引入uglifyjs-webpack-plugin去压缩js.

  • SplitChunks

    这个默认是拆分异步加载的代码,如果改成init或者all,会增大js文件,这个可能需要在项目差不多的时候,权衡之后再做使用。可以参考这里的对比

  • typescript code splitting

    这边折腾了不少时间,按照文档加上在tsconfig.json加上了"module": "esnext",发现还是报错,不能正常解析,最后通过添加了es2015lib里。

tips

  • ignore plugin

    moment这个包有个问题,那就是语言和核心部分捆绑在一起了,用这个可以忽略对应的部分。

  • preload
    可以对资源进行预加载,这个视情况而定,也许你其他的模块打包出来体积很小,可以不用做这个。我是因为没有对第三方的包进行提取,为了首次加载的速度,所以对后面的进行预加载.

如果有好的意见,欢迎提issue. 共同学习交流.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值