5. 补充

5.1 Webpack的代码分包

• 默认的打包过程：

  • 默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组 件模块打包到一起（比如一个app.js文件中）；

  • 这个时候随着项目的不断庞大，app.js文件的内容过大，会造成首屏的渲染速度变慢；

• 打包时，代码的分包：

  • 所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js；

  • 这些chunk.js会在需要时从服务器加载下来，并且运行代码，显示对应的内容；

• vue在打包的时候我们可以在main.js使用import 解决

  • 通过import函数导入的模块, 后续webpack对其进行打包的时候就会进行分包的操作

    import("./12_异步组件的使用/utils/math").then((res) => {
    
    console.log(res.sum(20, 30))
    
    })