Webpack如何实现代码分片？

本文共计1330个文字，预计阅读时间需要6分钟。

目录 + 背景 + CommonsChunkPlugin + splitChunks + 配置 + 异步加载资源 + 总结 + 背景 + 实现高性能应用的核心一点是尽可能让用户每次只加载必需的资源，优先级高的资源则采用延迟加载等策略。

目录

• 背景
• CommonsChunkPlugin
• splitChunks
• 配置
• 异步加载资源
• 总结

背景

实现高性能应用其中最重要的一点就是尽可能地让用户每次只加载必要的资源，优先级不要太高的资源则采用延迟加载等技术渐进式地获取，这样可以保证页面的首屏速度。代码分片是webpck打包工具所特有的一项技术，通过这项功能可以把代码按照特定的形式进行拆分，使用户不必一次全部加载，而是按需加载。

CommonsChunkPlugin

虽然这个插件在webpack4当中已经不推荐使用，但是我们还是要了解一下。这个插件可以将多个Chunk中的公共的部分提取出来。公共模块提取可以为几个项目带来几个收益：

• 开发过程中减少了重复模块打包，可以提升开发速度；
• 减小整体资源体积；
• 合理分片后的代码可以更有效的利用客户端缓存。

该插件的默认规则是只要一个模块被两个入口chunk所使用就会被提取出来，比如只要a和b用了react，react就会被提取出来。