webpack4搭建react, 性能优化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hesongGG/article/details/82257044

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

• hash缓存

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

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

  但是出现一个问题就是每次css改变，js的chunkhash也会改变，不知道这个是一个bug还是一个feature.
  因为其他的版本是不存在这个问题的，但是我目前这个版本出现了这个问题，之前整了个demo没有这个问题，查看github代码库的说法是推荐contenthash，chunkhash的保留只是为了兼容。
  所以对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",发现还是报错，不能正常解析，最后通过添加了es2015在lib里。

tips

• ignore plugin

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

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

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