Webpack具有小的初始脚本和所有其他脚本的异步加载

2 回答

• 12

  解决这个问题的方法有两个：

  • 首先你需要了解how code-splitting works in webpack

  • 其次，您需要使用 CommonsChunkPlugin 之类的东西来生成该共享包 .

  代码拆分

  在开始使用webpack之前，您需要忘记依赖于配置 . Require.js就是配置文件 . 这种心态使我很难转换到webpack，后者在node.js中的CommonJS之后更加紧密地建模，它依赖于没有配置 .

  考虑到这一点，请考虑以下内容 . 如果你有一个应用程序，并且你希望它异步加载javascript的其他部分，你需要使用以下范例之一 .

  Require.ensure

  require.ensure 是您可以在应用程序中创建"split point"的一种方法 . 同样，您可能认为您需要使用配置执行此操作，但事实并非如此 . 在我的文件中点击 require.ensure 的示例中，webpack将自动创建第二个包并按需加载它 . 在该分裂点内执行的任何代码将捆绑在一个单独的文件中 .

  require.ensure(['jquery'], function() {
      var $ = require('jquery');
      /* ... */
  });
  

  Require([])

  您也可以使用AMD版本的 require() 实现相同的功能，该版本采用一系列依赖项 . 这也将创建相同的分裂点：

  require(['jquery'], function($) {
      /* ... */
  });
  

  共享包

  在上面的示例中，您使用 entry 创建一个包含jQuery的 vendor 包 . 您无需手动指定这些依赖关系包 . 相反，使用上面的分割点，webpack将自动生成 .

  仅将 entry 用于页面中所需的单独 <script> 标记 .

  现在你已经完成了所有这些，你可以使用 CommonsChunkPlugin 来额外优化你的块，但是大部分魔法都是为你完成的，除了指定应该共享哪些依赖项之外你不需要做任何其他事情 . webpack 将自动拉入共享块，而无需额外的 <script> 标签或 entry 配置 .

  结论

  您描述的场景（多个 <script> 标签）可能实际上并不是您想要的 . 使用webpack，可以从只有一个 <script> 标记开始自动管理所有依赖项和包 . 经过几次从require.js重新分解到webpack的迭代，我通常是管理依赖关系的最简单，最好的方法 .

  祝一切顺利！

  回复于 2024-04-23T14:29:02+08:00
• 1

  这是我提出的解决方案 .

  首先，将这两个函数导出到 window.* - 您需要在浏览器中使用它们 .

  export function requireAsync(module) {
      return new Promise((resolve, reject) => require(`bundle!./pages/${module}`)(resolve));
  }
  
  export function runAsync(moduleName, data={}) {
      return requireAsync(moduleName).then(module => {
          if(module.__esModule) {
              // if it's an es6 module, then the default function should be exported as module.default
              if(_.isFunction(module.default)) {
                  return module.default(data);
              }
          } else if(_.isFunction(module)) {
              // if it's not an es6 module, then the module itself should be the function
              return module(data);
          }
      })
  }
  

  然后，当您想在页面上包含一个脚本时，只需将其添加到HTML中：

  <script>requireAsync('script_name.js')</script>
  

  现在 pages/ 目录中的所有内容都将被预编译为一个单独的块，只有在需要时才可以在运行时异步加载 .

  此外，使用上述函数，您现在可以方便地将服务器端数据传递到客户端脚本：

  <script>runAsync('script_that_needs_data', {my:'data',wow:'much excite'})</script>
  

  现在您可以访问它：

  // script_that_needs_data.js
  export default function({my,wow}) {
      console.log(my,wow);
  }
  

  回复于 2024-04-23T14:29:02+08:00