vue打包优化：过大文件拆分

最新推荐文章于 2024-07-24 10:42:03 发布

FL06052146

最新推荐文章于 2024-07-24 10:42:03 发布

阅读量621

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/FL06052146/article/details/136544965

版权

文章介绍了如何通过Webpack的splitChunks插件来解决项目中因单个包过大导致的性能问题，详细配置了不同模块的拆分规则和优先级。

摘要由CSDN通过智能技术生成

使用splitChunks插件，拆分体积超大的包，解决单个包过大的问题。
在这里插入图片描述

optimization: {
            splitChunks: {
                chunks: "all",          //async异步代码分割 initial同步代码分割 all同步异步分割都开启
                // minSize: 10000,         //字节 引入的文件大于30kb才进行分割
                // minChunks: 2,           //模块至少使用次数
                // maxAsyncRequests: 25,    //同时加载的模块数量最多是5个，只分割出同时引入的前5个文件
                // maxInitialRequests: 30,  //首页加载的时候引入的文件最多3个
                automaticNameDelimiter: '-', //缓存组和生成文件名称之间的连接符
                // name: true,                  //缓存组里面的filename生效，覆盖默认命名
                cacheGroups: {
                    vue: {
                        name: "vue",
                        test: /[\\/]node_modules[\\/]vue[\\/]/,
                        test: /[\\/]node_modules[\\/]vue[\\/]/,
                        priority: -10
                    },
                    vuex: {
                        name: 'vuex',
                        test: /[\\/]node_modules[\\/]vuex[\\/]/,
                        priority: -10
                    },
                    'vue-router': {
                        name: 'vue-router',
                        test: /[\\/]node_modules[\\/]vue-router[\\/]/,
                        priority: -10
                    },
                    antd: {
                        name: 'ant-design-vue',
                        test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
                        priority: -10
                    },
                    'libs-common-utils': {
                        name: 'libs-common-utils',
                        test: /[\\\/]node_modules[\\\/]libs-common-utils[\\\/]/,
                        priority: -10
                    },
                    vendors: {
                        test: /[\\\/]node_modules[\\\/]/,
                        priority: -20
                    },
                }
            }
        },