webpack5代码分离

一，实际开发的使用

主要就是上文中的第四步，动态导入。

二，默认配置

Webpack 提供了代码分离的特性，默认是将 异步代码 按照以下方式进行代码分离的：

module.exports = { 
    //... optimization: { 
    splitChunks: { 
    chunks: 'async', // 同步 or 异步，这里是异步 minSize: 20000, // 如果模块大小小于这个值，则不会被分割 20k minRemainingSize: 0, // 最小可保存大小，开发模式下为 0，其他情况下等于 minSize，一般不用手动配置 minChunks: 1, // 如果模块被引用次数小于这个值，则不会被分割 maxAsyncRequests: 30, // 异步模块，一次最多被加载的次数 maxInitialRequests: 30, // 入口模块最多被加载的次数 enforceSizeThreshold: 50000, // 强制分割的大小阈值 50k cacheGroups: { 
    // 缓存组 // 打包第三方库 defaultVendors: { 
    test: /[\\/]node_modules[\\/]/, // 正则匹配第三方库文件 priority: -10, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 }, // 打包公共模块 default: { 
    minChunks: 2, // 被超过两个模块引用，才会被打包 priority: -20, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 }, }, }, }, }; 

三， 同步代码的处理

但显然这对于同步代码是无能为力的，于是我们这样设置：将 optimization.splitChunks.chunks 的值设置为 all ，它表示：不管同步还是异步，都会进行代码分离，但是请注意，如果你的共用模块不属于第三方库（也就是不能在 node_modules 中找到），而属于你自己写的一些代码模块，这些代码就会按照 cacheGroups 下的 default 配置打包。如果属于第三方库，就按照 cacheGroups 下的 defaultVendors 配置打包。

module.exports = { 
    //... optimization: { 
    splitChunks: { 
    chunks: 'all', // 同步或异步 minSize: 100, // 自己设置最小分割大小 cacheGroups: { 
    // 缓存组 // 打包第三方库 defaultVendors: { 
    test: /[\\/]node_modules[\\/]/, // 正则匹配第三方库文件 priority: -10, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 filename: 'vendors.js' // 打包后的文件名 }, // 打包公共模块 default: { 
    minChunks: 2, // 被超过两个模块引用，才会被打包（可以去掉） priority: -20, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 filename: 'common.js' // 打包后的文件名 }, }, }, }, }; 

四，我在项目中的配置

optimization: { 
    ...//其他配置 splitChunks: { 
    chunks: 'all', // 同步或异步 // minSize: 100, // 自己设置最小分割大小 cacheGroups: { 
    // 缓存组 // 打包第三方库 defaultVendors: { 
    test: /[\\/]node_modules[\\/]/, // 正则匹配第三方库文件 priority: -10, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 name: 'vendors' // 打包后的文件名 }, // 打包公共模块 default: { 
    minChunks: 2, // 被超过两个模块引用，才会被打包（可以去掉） priority: -20, // 优先级 reuseExistingChunk: true, // 如果一个模块已经被打包过了，那么这个模块也不会被打包 }, }, } } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/cjjbc/11009.html