Recently, when I was working on the project, as the requirement iteration project became bigger and bigger, I found that the packaging was very slow every time. The packaged dist file was dozens of meters, and the first loading was also very slow. Here are some optimization methods, if there is insufficient, welcome to add!

1. Delete the map file from the compiled file

Once compiled, we’ll see that there are a lot of.map files in the folder, which are mainly used to help us debug code online and look at styles. To avoid large deployment packages, these files are usually not generated.

2. Lazy route loading

General project optimization usually uses route lazy loading to reduce the time consuming of the first load.

There are several common ways:

1. Vue asynchronous components

2. import()

3. Load the file using CDN

After packaging, I found that vendor.js file occupies a large amount of memory, which is mainly used by some third-party libraries, such as vuex, VUE-Router, AXIos, elementUI and other files. For example, when using elementUI, we can introduce whatever components we need and introduce them as needed. CDN loading can also be used in index. HTML to directly import third-party resources and reduce server stress.

Then modify the configuration in webpack.base.conf.js to add externals to module.exports.

The original reference needs to be commented out for it to take effect

// import Vue from "vue"
// import Element from "element-ui"
Copy the code

4. Delete information printed on the console

After packaging, filter console.log and debugger code to prevent the output of logs when opening F12. How to configure this article, see juejin.cn/post/686299…