美文网首页
webpack 打包分包

webpack 打包分包

作者: Gino_Li | 来源:发表于2022-02-19 23:12 被阅读0次

注意点

  1. priority 优先级,数字越大越优先
    // 打包时候切分node_module三方包,以及common公用包
    splitChunks: {
      maxInitialRequests: 10,
      cacheGroups: {
        expressioneditor: {
          test: /[\\/]expression-editor|codemirror[\\/]/,
          name: 'expressioneditor',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 2
        },
        editormodules: {
          test: /[\\/]js-beautify|vuedraggable|sortablejs[\\/]/,
          name: 'editormodules',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 2
        },
        mobilemodules: {
          test: /[\\/](vant|smui-form-library|quill)[\\/]/,
          name: 'mobilemodules',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 2
        },
        southgisui: {
          test: /[\\/]southgisui[\\/]/,
          name: 'southgisui',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 2
        },
        commonmodules: {
          // 将更新频繁的库统一放到business.js文件中
          test: /[\\/](btnfuncs|fpautils)[\\/]/,
          name: 'commonmodules',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 2
        },
        sguiform: {
          // 将更新频繁的库统一放到business.js文件中
          test: /[\\/](sgui-form|sguifilepreview)[\\/]/,
          name: 'sguiform',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 2
        },
        jqueryModule: {
          test: /[\\/]jquery[\\/]/,
          name: 'jqueryModule',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 2 // 该配置项是设置处理的优先级,数值越大越优先处理
        },
        vueModule: {
          test: /[\\/](vue|vuex)[\\/]/,
          name: 'vueModule',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 2 // 该配置项是设置处理的优先级,数值越大越优先处理
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 1 // 该配置项是设置处理的优先级,数值越大越优先处理
        },
        commons: {
          test: /[\\/]src[\\/]common[\\/]/,
          name: 'commons',
          minSize: 30000,
          minChunks: 3,
          chunks: 'initial',
          priority: -1,
          reuseExistingChunk: true // 这个配置允许我们使用已经存在的代码块
        },
        generateFormCommon: {
          test: /[\\/]src[\\/]pages[\\/]generateForm[\\/]src[\\/]/,
          name: 'generateFormCommon',
          minSize: 30000,
          minChunks: 2,
          chunks: 'initial',
          priority: 2,
          reuseExistingChunk: true
        },
        editorFormCommon: {
          test: /[\\/]src[\\/]pages[\\/]editor[\\/]src[\\/]/,
          name: 'editorFormCommon',
          minSize: 30000,
          minChunks: 2,
          chunks: 'initial',
          priority: 2,
          reuseExistingChunk: true
        }
      }
    }
  }

相关文章

  • webpack 打包分包

    注意点 priority 优先级,数字越大越优先

  • 性能优化+打包构建

    性能优化 webpack-bundle-analyzerwebpack构建优化webpack分包webpack g...

  • 15.异步组件和suspense

    webpack的代码分包 默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直...

  • webpack vue 异步组件加载 按需加载

    webpack分包:减少首屏加载时间-路由懒加载 使用webpack中的syntax-dynamic-import...

  • webpack分包分析

    对webpack略有了解的朋友都知道,通过给webpack指定入口文件和出口路径,webpack就能从入口文件开始...

  • Webpack分包策略

    在 webpack 打包过程中,经常出现 vendor.js, app.js 单个文件较大的情况,这偏偏又是网页最...

  • Webpack分包策略

    在 webpack 打包过程中,经常出现 vendor.js, app.js 单个文件较大的情况,这偏偏又是网页最...

  • 小程序整理篇(持续更新)

    一、分包加载问题 !!!!!TAB页面不能打包在分包页面 1、建立分包目录结构,我这里是将所有分包集合到一个位置,...

  • webpack增量发布多页应用

    一,webpack打包存在的问题 webpack的打包顺序: varpath=require('path'); m...

  • 基于webpack 3 打包性能优化

    基于webpack 3 打包性能优化 source Scope Hoisting. 过去 webpack 打包时的...

网友评论

      本文标题:webpack 打包分包

      本文链接:https://www.haomeiwen.com/subject/boetaltx.html