vue-cli: vue.config.js - configureWebpack: optimization problem

Version

3.4.0

Reproduction link

https://github.com/katonada/vue.config/blob/master/vue.config.js

Environment info

 System:
    OS: Windows 10
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @kazupon/vue-i18n-loader: ^0.3.0 => 0.3.0
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.4.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.4.0
    @vue/cli-plugin-babel: ^3.4.0 => 3.4.0
    @vue/cli-plugin-e2e-cypress: ^3.4.0 => 3.4.0
    @vue/cli-plugin-eslint: ^3.4.0 => 3.4.0
    @vue/cli-plugin-unit-mocha: ^3.4.0 => 3.4.0
    @vue/cli-service: ^3.4.0 => 3.4.0
    @vue/cli-shared-utils:  3.4.0
    @vue/component-compiler-utils:  2.5.2
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue:  4.7.1
    vue: ^2.6.5 => 2.6.5
    vue-cli-plugin-django: ^0.1.3 => 0.1.3
    vue-cli-plugin-i18n: ^0.5.1 => 0.5.1
    vue-cookie: ^1.1.4 => 1.1.4
    vue-dayjs: ^1.0.2 => 1.0.2
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-i18n: ^8.8.1 => 8.8.1
    vue-intersect: ^1.1.2 => 1.1.2
    vue-line-clamp: ^1.3.2 => 1.3.2
    vue-loader:  15.6.2
    vue-meta: 1.5.8 => 1.5.8
    vue-mq: ^1.0.1 => 1.0.1
    vue-nprogress: ^0.1.5 => 0.1.5
    vue-router: ^3.0.2 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.5 => 2.6.5
    vue-template-es2015-compiler:  1.8.2
    vue-text-dot: ^1.0.0 => 1.0.0
    vue-timers: ^1.10.0 => 1.10.0
    vue-tiny-slider: ^0.1.31 => 0.1.31
    vue-video-player: ^5.0.2 => 5.0.2
    vuebar: 0.0.20 => 0.0.20
    vuex: ^3.1.0 => 3.1.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

When uncomment optimization: { splitChunks: { …}} part, build works, serve is working, no errors shown but the project in browser shows blank screen and console shows no error.

What is expected?

The project works without the optimization part as it should. It’s expected to work with optimization too.

What is actually happening?

With optimization, there is blank screen in browser and no errors, network and all in dev tools


By applying any SplitChunksPlugin rules that blank screen is happening 😦 e.g. splitChunks: { chunks: ‘all’ } Webpack optimization rules (https://webpack.js.org/configuration/optimization/). SplitChunksPlugin https://webpack.js.org/plugins/split-chunks-plugin/

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 16 (2 by maintainers)

Most upvoted comments

Try by adding chunks: all to your page.index

  pages: {
    index: {
      entry: 'src/main.js',
      chunks: 'all'
    }
  }

Try by adding chunks: all to your page.index

  pages: {
    index: {
      entry: 'src/main.js',
      chunks: 'all'
    }
  }

this solved my problem

@sharvilak11 I think I’ve found a solution at least to my problem (still investigating but looks promising). So instead of defining pages in vue.config.js I’m running a separate build/serve script providing an entry file and destination folder:

    "serve:login": "vue-cli-service serve ./src/login.ts --open",
    "build:login": "vue-cli-service build ./src/login.ts --modern --silent --dest ./dist/login",

For multiple pages you would probably need some script that runs build script for each page instead of putting them into packages.json scripts

The other problem that you may find it’s that all chunks (including vendor ones) are located in separate folders (/dist and /dist/login in my case), which means that they cannot be cached together, however some of them have the same filename (for example vendor.axios.bfd77495.js is located both in/dist and /dist/login folders) so I think it should be possible to find duplicates, removing them from /dist/login folder and telling the server to serve the cached version from /dist. I’m not working on this though as in my case it’s not a priority

Hope it helps someone with the similar issue