异步代码分割的问题

Question

当异步代码分割是，如果在vendors 配置中设置了filename属性，会报错，这是正常的吗

Answer 1

Dell 2020-03-22 19:08:09

能发一下你的业务代码吗

• 提问者 weixin_慕丝7060995 #1

  // index.js文件（和老师你的代码是一样的）
  function getComponent() {
      return import(/* webpackChunkName: "lodash" */'lodash').then(({ default: _ }) => {
          const element = document.createElement('div')
          element.innerHTML = '异步代码分割'
          return element
      })
  }
  
  getComponent().then(element => {
      document.body.appendChild(element)
  })
  
  // webpack 里面的配置（是SplitChunksPlugin的默认配置，官网上粘贴过来的，然后只加了filename属性）
  optimization: {
          splitChunks: {
              chunks: 'all',
              minSize: 30000,
              maxSize: 0,
              minChunks: 1,
              maxAsyncRequests: 6,
              maxInitialRequests: 4,
              automaticNameDelimiter: '~',
              automaticNameMaxLength: 30,
              cacheGroups: {
                  defaultVendors: {
                      test: /[\\/]node_modules[\\/]/,
                      priority: -10,
                      filename: 'vendor.js'
                  },
                  default: {
                      minChunks: 2,
                      priority: -20,
                      reuseExistingChunk: true
                  }
              }
          }
      }

• 提问者 weixin_慕丝7060995 #2

  好像知道了，刚刚在 SplitChunksPlugins 里面找到了下面的话
  splitChunks.cacheGroups.{cacheGroup}.filename
  string function (chunkData): string
  
  Allows to override the filename when and only when it's an initial chunk. All placeholders available in output.filename are also available here.
  
  不支持对异步代码分割命名～ 可能想对异步代码重命名需要别的配置吧