vue-cli icon indicating copy to clipboard operation
vue-cli copied to clipboard

Prefetch Removed and Docs Out-of-date

Open jmcooper opened this issue 1 year ago • 0 comments

Version

5.0.8

Reproduction link

github.com

Environment info

  System:
    OS: Windows 10 10.0.22621
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
  Binaries:
    Node: 18.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.1848.0), Chromium (114.0.1823.58)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.4.0
    @vue/babel-helper-vue-transform-on:  1.1.5
    @vue/babel-plugin-jsx:  1.1.5
    @vue/babel-plugin-transform-vue-jsx:  1.4.0
    @vue/babel-preset-app:  5.0.8
    @vue/babel-preset-jsx:  1.4.0
    @vue/babel-sugar-composition-api-inject-h:  1.4.0
    @vue/babel-sugar-composition-api-render-instance:  1.4.0
    @vue/babel-sugar-functional-vue:  1.4.0
    @vue/babel-sugar-inject-h:  1.4.0
    @vue/babel-sugar-v-model:  1.4.0
    @vue/babel-sugar-v-on:  1.4.0
    @vue/cli-overlay:  5.0.8
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.8
    @vue/cli-plugin-router:  5.0.8
    @vue/cli-plugin-vuex:  5.0.8
    @vue/cli-service: ~5.0.0 => 5.0.8
    @vue/cli-shared-utils:  5.0.8
    @vue/compiler-core:  3.3.4
    @vue/compiler-dom:  3.3.4
    @vue/compiler-sfc:  3.3.4
    @vue/compiler-ssr:  3.3.4
    @vue/component-compiler-utils:  3.3.0
    @vue/reactivity:  3.3.4
    @vue/reactivity-transform:  3.3.4
    @vue/runtime-core:  3.3.4
    @vue/runtime-dom:  3.3.4
    @vue/server-renderer:  3.3.4
    @vue/shared:  3.3.4
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^8.0.3 => 8.7.1
    vue: ^3.2.13 => 3.3.4
    vue-eslint-parser:  8.3.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  17.2.2 (15.10.1)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

  1. npm install -g @vue/cli@5
  2. vue create my-project
  3. vue inspect > wp.config
  4. Notice that there is no prefetch/preload plugin in the generated webpack config
  5. View the prefetch documentation at https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch
  6. Notice that it still describes how to use prefetch, following these instructions does not work
  7. Clone the repro repo at https://github.com/jmcooper/vue-prefetch-5.0.8, which was generated with the cli (5.0.8) and has had routing and a lazy-loaded route added.
  8. Run the project and notice that the lazily-loaded route is not pre-fetched
  9. In that project run: npm install @vue/preload-webpack-plugin
  10. Add this to the vue.config.js:
configureWebpack: {
    plugins: [
      new PreloadWebpackPlugin(
        {
          rel: 'prefetch',
          include: 'asyncChunks',
        },
      ),
    ],
  },
  1. Notice that pre-fetch still is not working

What is expected?

Prefetch should work out-of-the-box or the docs should show how to enable pre-fetch with the webpack config generated by the cli.

What is actually happening?

Prefetch does not work, docs are incorrect, and I can find no way to get prefetch working.

jmcooper avatar Jun 29 '23 16:06 jmcooper