Vue + webpack: как работает динамический импорт компонентов?

Я использую комбинацию 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 выглядит следующим образом: enter image description here

И я просто ссылаюсь на эти файлы в шаблоне 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 файлов с хэшированными именами в статической папке, и я не могу понять логику (поэтому я не могу ссылаться на них в шаблоне.

).

Webpack имеет так называемые "волшебные комментарии" - см. здесь 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

Edit: как я только что увидел, вы даже можете отключить его с помощью ключа конфигурации filenamehashing: https://cli.vuejs.org/config/#filenamehashing

Вернуться на верх