webpack 如何实现动态加载

Webpack 是一款强大的模块打包工具，它支持动态加载（也称为异步加载或按需加载）。动态加载允许你在运行时而不是在初始加载时加载某些模块，这对于大型应用来说非常重要，可以提高首屏加载速度。

在 Webpack 中实现动态加载通常通过以下步骤：

1. 使用 `import()` 函数：这是最推荐的方式，`import()` 返回的是一个 Promise，你可以使用 `await` 关键字等待这个 Promise 解决，然后访问导入的模块。例如：

   async function loadModule(moduleName) {
     return await import(`./${moduleName}`);
   }
   const myModule = await loadModule('myModule.js');

2. 利用 CommonsChunkPlugin 插件：如果你有多个组件都引用了相同的模块，CommonsChunkPlugin 可以帮助提取共享部分并将其作为一个单独的 chunk 进行加载，然后在需要的地方动态引入。

   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     minChunks: function (module) {
       // 检查模块是否来自 node_modules
       return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf('./node_modules') !== -1;
     },
   }),

3. HtmlWebpackPlugin 和 dynamic import：结合这两个插件，可以在 HTML 文件模板中插入动态加载脚本，如 `<script type="module">...</script>`。