SpiltChunks

SpiltChunks

Split Chunks 有诸多优点，例如有利于缓存命中、有利于运行时的持久化文件缓存等。其中有一类情况能提升后续环节的工作效率，即通过分包来抽离多个入口点引用的公共依赖。

大模块不提取，重复打包，影响较大

optimization: {
  splitChunks: {
    // 自动提取所有公共模块到单独 bundle
    chunks: "all";
  }
}

除此之外，splitChunks 还支持很多高级的用法，可以实现各种各样的分包策略，这些我们可以在 文档 中找到对应的介绍。

vue 配置

optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                name: 'chunk-vendors',
                    test: /[\\\/
                    ]node_modules[\\\/
                    ]/,
                priority: -10,
                    chunks: 'initial'
            },
            common: {
                name: 'chunk-common',
                    minChunks: 2,
                        priority: -20,
                            chunks: 'initial',
                                reuseExistingChunk: true
            }
        }
    },
    minimizer: [
        {
            options: {
                test: /\.m?js(\?.*)?$/i,
                chunkFilter: () => true,
                warningsFilter: () => true,
                extractComments: false,
                sourceMap: true,
                cache: true,
                cacheKeys: defaultCacheKeys => defaultCacheKeys,
                parallel: true,
                include: undefined,
                exclude: undefined,
                minify: undefined,
                terserOptions: {
                    compress: {
                        arrows: false,
                        collapse_vars: false,
                        comparisons: false,
                        computed_props: false,
                        hoist_funs: false,
                        hoist_props: false,
                        hoist_vars: false,
                        inline: false,
                        loops: false,
                        negate_iife: false,
                        properties: false,
                        reduce_funcs: false,
                        reduce_vars: false,
                        switches: false,
                        toplevel: false,
                        typeofs: false,
                        booleans: true,
                        if_return: true,
                        sequences: true,
                        unused: true,
                        conditionals: true,
                        dead_code: true,
                        evaluate: true
                    },
                    mangle: {
                        safari10: true
                    }
                }
            }
        }
    ]
},

为什么拆包可以加速

因为我们页面一般都做了缓存，而我们代码一般都是增量更新，所以当页面颗粒度拆的足够小时，大部分资源都是直接命中缓存 304，只有更新的这个文件需要重新请求，而这个包拆分的粒度就是请求节省的时间。