[Vue] 异步路由组件和非路由组件的区别？

异步路由组件

都知道异步路由组件通过 () => import("./views/Home.vue") 导入路由组件。

但是它怎么就按需加载资源、代码分割了？

不同的代码解析报告

非异步路由组件

异步路由组件

代码分析报告生成代码

pnpm install webpack-bundle-analyzer

file:[vue.config.js]

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
};