vue + webpack：动态组件导入是如何工作的？

Posted 2023-02-22

【中文标题】vue + webpack：动态组件导入是如何工作的？

【英文标题】：vue + webpack: how the dynamic component import works?

【发布时间】：2021-11-09 12:49:46

【问题描述】：

我使用 Django+Vue 的组合，但我很难理解 vue-cli-service build 或 vue-cli-service serve 创建的名称是如何创建和工作的，以及如何在生产中设置它。

如果我没有动态组件导入，一切都会顺利进行。

我的vue.config.js 看起来像这样：

module.exports = 
  pages: 
    main: 
      entry: "./src/main.js",
      chunks: ["chunk-vendors"],
    ,
  ,
  // Should be STATIC_URL + path/to/build
  publicPath: "/front/",
  // Output to a directory in STATICFILES_DIRS
  outputDir: path.resolve(__dirname, "../_static/front/"),

  // Django will hash file names, not webpack
  filenameHashing: false,
  productionSourceMap: false,
  runtimeCompiler: true,
  devServer: 
    writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
  ,
;

built 的结果如下所示：

我只是在 Django 模板中引用这些文件：

        <div id="app"></div>
        <script type="text/javascript" src="% static 'front/js/chunk-vendors.js' %"></script>
        <script type="text/javascript" src="% static 'front/js/main.js' %"></script>

但是一旦我开始使用动态组件，就像这样：

const User = () => import("./components/User")

一切都停止工作，另外webpack在静态文件夹中创建了一些带有哈希名称的js文件，我无法弄清楚逻辑（所以我无法在模板中引用它们。

【参考方案1】：

Webpack 有所谓的 'magic cmets' - 见这里https://webpack.js.org/api/module-methods/#magic-comments

你所拥有的并不是真正的动态路由，而是惰性路由，这意味着它们的代码被写入块而不是主 js 文件中，并且仅在加载组件时才加载。 因此，要创建一个命名块，您可以这样编写导入：

import(/* webpackChunkName: "about" */ "../views/About.vue")

但是，在那之后你仍然会有一个哈希值。这样做是为了避免浏览器缓存 - 如果在某些条件下（例如没有设置 etags 等）具有相同的名称，浏览器将不知道有文件的新版本。这是一个 webpack 配置，可以在vue 配置。您可以在这里查看：https://github.com/vuejs/vue-cli/issues/1649

编辑：正如我刚刚看到的，您甚至可以使用 filenamehashing 配置键禁用它：https://cli.vuejs.org/config/#filenamehashing