如何使用

分离包是webpack官方的功能，可以让我们做到按需加载。

这里用vue做个演示

module.exports = {
    optimization: {
        splitChunks: {
            chunks: "all",  //优化全部代码
            minSize: 30000,
            maxAsyncRequests: 5,
            maxInitialRequests: 5,
            cacheGroups: {
                //分离vue
                vue: {
                    test: /[\\/]node_modules[\\/](vue)[\\/]/,
                    name: "vue",
                    priority: 2
                },
                //分离router
                router:{
                    test: /[\\/]node_modules[\\/](vue-router)[\\/]/,
                    name: "vue-router",
                    priority: 2
                },
                //公共依赖
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    priority: 1,
                    reuseExistingChunk: true
                }
            }
        },
        //分离运行时的代码
        runtimeChunk: {
            name: "manifest"
        }
    }

};

官方文档

webpack.docschina.org/plugins/spl…