One, foreword

The contents of this article include:

  1. How to use VUE-CLI3 for multi-page configuration and construction and the problems encountered;
  2. In combination withsplitChunksSeparation of common code blocks to optimize runtime load performance;
  3. In combination withdllPluginPrebuild common code blocks to optimize build speed at compile time.
  4. In combination withwebpack-bundle-analyzerOutput build report
  5. Cross-domain proxy configuration

Download the Demo

Second, the construction effect

2.1. App Directory description

new_years_festival
spring_festival
index.js
config.json

2.2 Construction effect before optimization

instructions



chunk-vendors.js
The more libraries and pages, the bigger the vendor.



new_years_festival
vue
spring_festival
vue
vue-router

2.3. Construction effect after optimization

instructions



chunk-vendor
chunk-common.js



spring_festival
spring-festival-vendor.js
vue-router

2.4. Pre-build effect of dllPlugin

instructions
vendor.dll.js
vue.js
utils.js

Third, Get Started

Unless otherwise specified, the following is the configuration in vue.config.js

3.1 Multi-Page Configuration

3.3 splitChunks code separation policy

3.4 dllPlugin pre-built configuration

This part was not included in the original writing plan. Before I wrote an article about DllPlugin for improving webpack compilation speed, there was a question raised by a Taoist friend in the comment, so I simply added some space to explain it here. In fact, the configuration method is basically the same as the previous article.

A. First define a webpack.dll.config.js, the content is basically the same, no longer paste b. Next, add configuration to vue.config.js

3.5 Analyzer generates build reports

A. Configure in vue.config.js

package.json 

 "scripts": {
    "analyze": "ANALYZE=true vue-cli-service build"
  },
Copy the code

C. Run NPM run analyze and access localhost:8888

3.6 Cross-domain proxy

4000
http://localhost:300/api/get_info
http://localhost:4000/api/get_info

Four, conclusion

  1. Full Demo download

  2. ERROR Invalid options in vue.config.js: “publicPath” is not allowed. This ERROR occurs when you configure the publicPath field in vue.config.js. Vue-cli version is 3.3.0. The official explanation:

    The publicPath of relative paths has some limitations. Relative publicPath should be avoided when using HTML5 history.pushState routing; When building a multi-page application using the Pages option.

    Just avoid it and you should be able to configure it. Because I have some static resource reference problem need to configure the path, hope informed personage can answer?

  3. Finished writing home for the New Year, I wish you all a happy New Year