An example of how to optimize a project after the Vue project is completed

1. Specify different packaging entry points for development mode and release mode

The project created by vue ui hides the webpack configuration. You can create a vue.config.js configuration file in the src root directory. Export the configuration object in the configuration file.

2. By default, the development mode and release mode of the Vue project share a packaged entry file (src/main.js). You can use configureWebpack or chainWebpack to define the webpack packaging configuration

Change the main.js file to main-dev.js. Copy main.js and change it to main-prod.js

2. Load external CDN resources through externals

By default, third-party dependency packages imported through the import syntax will eventually be packaged and merged into the same file, which will lead to the problem of a single file being too large after successful packaging (the CSS style sheet we imported will also be packaged into the same file, resulting in a file that is too large).

To solve the above problems, you can configure and load external CDN resources through the externals node of webpack. Any third-party dependency packages declared in externals will not be packaged and merged into the final file.

① Configure the externals node of webpack and configure it in the release stage

Third-party dependency packages declared in externals will not be packaged. The project will search for the corresponding objects in the window global when using the dependency packages. Therefore, you need to introduce js and css resources from CDN in the index.html file so that they can be found globally

You need to add the following CDN resource reference to the header of the public/index.html file:

Specific operation process:
① In main-prod.js, comment out the css files referenced by nprogress and quill ② In the head area of ​​index.html, load the js and css styles of nprogress and quill through CDN ③ In the head area of ​​index.html, load the remaining dependent js through CDN

You can find the corresponding open source library through staticfile CDN

File size before using CDN:

File size after using CDN:

3. Optimize ElementUI packaging through CDN

Although we enabled on-demand loading of element-ui components during the development phase to reduce the package size as much as possible, those components loaded on demand still occupy a large file size. At this point, we can also load the components in element-ui through CDN, which can further reduce the size of the packaged file.

The specific operation process is as follows:
① In main-prod.js, comment out the code for element-ui to be loaded on demand ② In the head area of ​​index.html, load element-ui's js and css styles through CDN

Finished file size:

4. Home page content customization

① The content of the homepage may be different in different packaging environments. We can customize it through plug-ins. The plug-in configuration is as follows:

 // Through plugin('html'): find the html plugin. Through tap(): you can modify the fixed configuration items in this plug-in // Through args: you can get some relevant parameters of the current plug-in.
  // Add a custom attribute isprod in args[0]. When in the development phase, it is assigned to true, and when in the release phase, it is assigned to false

② In the public/index.html homepage, you can decide how to render the page structure based on the value of isProd

5. Use lazy loading of routes

When packaging and building a project, all components corresponding to the routes are packaged into one file, which makes the file too large and affects page loading. It would be more efficient if we could split the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed.

This concludes this article about how to optimize a Vue project after it is completed. For more Vue project optimization content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!