Vue Cli 3.0 拆包配置

最新推荐文章于 2024-10-29 14:42:04 发布

理个以哈呦

最新推荐文章于 2024-10-29 14:42:04 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/qq_15253407/article/details/89561765

VUE 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue Cli 3.0中进行拆包配置，通过修改vue.config.js文件，并详细参考了Webpack的split-chunks-plugin配置教程。

参考WebPack split-chunks-plugin插件配置教程！！！

1.修改配置文件vue.config.js

// vue.config.js 配置说明
module.exports = {
    // webpack的配置在这个属性里修改configureWebpack
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'development') {
            config.devtool = 'source-map';
            // mutate config for production...
        } else {
            /**
             * @link https://webpack.js.org/plugins/split-chunks-plugin/#root
             * @type {{splitChunks: {cacheGroups: {xdfsdk: {name: string, test: RegExp, priority: number, chunks: string}}}}}
             * @priority 优先执行权重  chunk-vendors: -10  chunk-common: -20
             * @chunks initial(初始块)、async(按需加载块)、all(全部块)
             */
             config.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
                         },
                         newsdk: {
                             name: 'new-sdk-config',
                             test: /new-sdk/,  // src 项目下的文件夹，对该文件jia
                             minChunks: 1,
                             minSize: 0,
                             chunks: 'async',
                             priority: 60,
                             reuseExistingChunk: true
                         }
                    }
                }
             }
        }
    },
    // 第三方插件配置
    pluginOptions: {}
}