入门webpack的最佳实践(基于webpack4.X 5.X)– 运行体验优化

导语

来到这家公司之后,一直在使用webpack,也写了不少笔记,但是都比较零散,现在决定整理一下webpack相关的知识点,由浅入深,方便自己后续查漏补缺,后续会一直更新。

前言

本文将从几个方面,介绍webpack如何优化打包后的运行体验,所谓运行体验,就是用户在使用我们打包后的应用时,能够快速加载页面,渲染关键信息。

目录

  • splitChunks
  • 懒加载
  • prefetch 与 preload
  • css内联

splitChunks

当我们打包的模块比较大的时候,我们可以通过splitChunks来进行分包配置,从 webpack v4 开始,移除了 **CommonsChunkPlugin**,取而代之的是 **optimization.splitChunks**,先来看一下它的默认配置

module.exports = {

  //...

  optimization: {

    splitChunks: {

      chunks: 'async',

      minSize: 20000,//当导入的模块最小是多少字节才会进行代码分割

      minRemainingSize: 0,//解析见代码下面的文字说明,不用设置

      minChunks: 1,//当一个模块被导入(引用)至少多少次才对该模块进行代码分割

      maxAsyncRequests: 30,//按需加载时的最大并行请求数

      maxInitialRequests: 30,//入口点的最大并行请求数

      enforceSizeThreshold: 50000,//解析见代码下面的文字说明,不用设置

      cacheGroups: {//缓存组

        defaultVendors: {

          test: /[\\\\/]node\\_modules[\\\\/]/,

          priority: -10,//优先级

          reuseExistingChunk: true,

        },

        default: {

          minChunks: 2,

          priority: -20,

          reuseExistingChunk: true,

        },

      },

    },

  },

};

更多配置请参阅: https://webpack.docschina.org/plugins/split-chunks-plugin/

chunks

  • all模式下,入口文件和动态引入文件都会进行打包,作用最强大
  • initial 模式下,会将入口文件中的依赖包重新切割为一个新的文件,其它文件中动态引入的不会进行拆分
  • async(默认值)模式下,入口文件中的模块输出一个依赖包,对于动态加载的模块,默认配置会将该模块单独打包。

cacheGroups

cacheGroups是让我们自定义打包策略的地方,我们想抽取的各类公共模块,都再这个地方配置,存组可以继承和/或覆盖来自 splitChunks.\\* 的任何选项,比较常用的几个参数有

  • priority:优先级,只配置在缓存组的每一项,决定执行的顺序。
  • minChunks:最小块,即当块的数量大于等于minChunks时,才起作用
  • minSize:最小大小,即当抽取的公共模块的大小,大于minSize所设置的值,才起作用
  • maxSize:如果引入的包大小已经超过了设置的最大值,那么webpack会尝试对该包再进行分割
  • test:匹配规则,说明要匹配的项,这里是匹配**匹配绝对模块资源路径或 chunk 名称**
  • name: 打包之后的文件名,从 webpack 5 开始,不再允许将 entry 名称传递给 {cacheGroup}.test 或者为 {cacheGroup}.name 使用现有的 chunk 的名称。

比如,我们想在默认缓存组的基础上,抽离react的相关依赖,我们可以这样配置

cacheGroups: {

  // 配置提取模块的方案

  defaultVendors: {

    test: /[\\/]node\\_modules[\\/]/,

    priority: -10,

    reuseExistingChunk: true,

    name: 'vendors',

  },

  default: {

    minChunks: 2,

    priority: -20,

    reuseExistingChunk: true,

    name: 'default',

  },

  react: {

    test: /(react|react-dom)/, // 匹配chunk的名称

    name: 'react', //打包后的文件名

    chunks: 'all',

    priority: 13, // 优先级 越高则先处理

  },

},

在打包后,就会看到react的依赖包

最后

感谢你能看到这里,本文总结了优化运行体验的几种配置,希望对你有所帮助,之后会陆续更新其他webpack相关的文章,如果能留下你的一个赞,笔者将感激不尽。

参考链接

https://webpack.docschina.org

https://juejin.cn/post/7023242274876162084

版权声明:
作者:Jou
链接:https://jkboy.com/archives/11502.html
来源:随风的博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
入门webpack的最佳实践(基于webpack4.X 5.X)– 运行体验优化
来到这家公司之后,一直在使用webpack,也写了不少笔记,但是都比较零散,现在决定整理一下webpack相关的知识点,由浅入深,方便自己后续查漏补缺,后续会一...
<<上一篇
下一篇>>