使用 import() 做动态加载， webapck 没有把模块单独打包

Question

如官网描述： https://reactjs.org/docs/code...

import React, { Suspense } from 'react';

const LuckyWheel = lazy(() => import('@lucky-canvas/react').then(({ LuckyWheel }) => {
  return { default: LuckyWheel};
}));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <LuckyWheel />
        </section>
      </Suspense>
    </div>
  );
}

结果：
正常运行。但是LuckyWheel 没有被单独打包。

Answer 1

首先，使用 import()，webapck 不需要任何额外的配置就可以单独打包的。
其次如果没有单独打包，那肯定是配置上有问题。

没有任何配置时候的打包输出看这里：chunkFilename。chunkFilename 用来设置不在entry 中引入的文件，通常是指动态加载的文件。

webpack.config.js：
  {
     ...
  output: {
    filename: 'js/[name].[chunkhash:5].js',
    chunkFilename: 'js/[name].[chunkhash:8].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  ...
  }

chunkFilename 将会是你动态加载的模块打包输出的文件。比如：

// dist/js 文件夹下
964.abeaa023.js

为什么没有单独打包呢？很有可能是受到了 splitChunks 的影响。
webpack.config.js:

 { 
   optimization：{
     splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          name: 'vendor', // 打包后的文件名，任意命名
          test: /[\\/]node_modules[\\/]/, // 指定是 node_modules 下的第三方包
          maxInitialRequests: 5,
          // minChunks: 2,
          priority: 10, // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
        },
      }
    }
}

如果你在拆包优化（把 node_modules 里的第三方包都打入 vendor）的时候配置了上面内容，则不会单独打包动引入的模块。出现这个问题的原因是设置了：

verdor:{
  chunks: 'all',
  ...
}

webpack 官网解释： https://webpack.docschina.org...
几个值介绍：

• initial 这个值表示项目中被直接引入的模块将会被用于优化。
• async 这个值表示按需引入的模块将会被用于优化
• all 这个场景表示无论是按需引入的模块，还是直接引入的模块，都会被用于优化。

再回顾一下上面的设置，我们设置了chunks: 'all'，表示将处理同步和异步引入，全部打入到vendor，所以不会出现拆分单独的包。
解决方法（任选其一）：

1. 把 vendor 的 chunks 改成 initial

2. 单独添加 chuns:'async' 的处理，并且把 priority 设置的比其他可能匹配到的要大。【推荐】

   {
     async:{
      name:'async'
      chuns:'async',
      priority: 20, 
     },
     verdor:{
    name:'vendor',
    chunks: 'all',
    priority: 10
    ...
   }
   }

   这样就会有 async.[chunkhash].js