vue-cli
vue-cli copied to clipboard
Prefetch Removed and Docs Out-of-date
Version
5.0.8
Reproduction link
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
- npm install -g @vue/cli@5
- vue create my-project
- vue inspect > wp.config
- Notice that there is no prefetch/preload plugin in the generated webpack config
- View the prefetch documentation at https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch
- Notice that it still describes how to use prefetch, following these instructions does not work
- 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.
- Run the project and notice that the lazily-loaded route is not pre-fetched
- In that project run: npm install @vue/preload-webpack-plugin
- Add this to the vue.config.js:
configureWebpack: {
plugins: [
new PreloadWebpackPlugin(
{
rel: 'prefetch',
include: 'asyncChunks',
},
),
],
},
- 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.