Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article, "vue packaging generated file js file is too large to optimize", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "vue packaging generated file how to optimize the js file is too large" article.

The js file generated by vue package is too large to optimize 1. Components are loaded on demand

Now most ui libraries are processed in the form of components, so you only need to import those that need modules.

two。 Remove the generated map file

Map files are generated when packaging, but map files are generally large, so you can cancel the generation of map files.

(1) config/index.js finds productionSourceMap and changes true to false

3.cdn introduction

These UI component libraries are introduced through external introduction, so as to reduce the problem of excessive package files.

(1) index.html

Introduce external files and add

(2) main.js

Remove the introduction of vue and vue-router in the page

4. Routing lazy loading

5. Code compression

Config/index.js found productionGzip and changed false to true.

Note: install compression-webpack-plugin first

Npm install-- save-dev compression-webpack-plugin6. Last

Before optimization:

After optimization:

Description of the problem that the js file is too large after the project is packaged

After the front-end project is packaged, the .js file is too large, which causes the project to load too slowly for the first time. Check the various solution materials and summarize the following points:

1. Using cdn to introduce third-party libraries that do not change much

Similar to

Webpack.base.conf.js add:

Externals: {'vue':' Vue', 'vue-router':' VueRouter', 'element-ui':' ELEMENT', 'echarts':' echarts', 'axios':' axios'}, 2. Lazy loading using vue

But there is a sentence on the official website.

If you are using Babel, you will need to add the syntax-dynamic-import plug-in so that Babel can parse the syntax correctly.

This plug-in relies on 6.x.babel to pay attention to

3. Server and front-end configuration enable compression

Server nginx configuration add:

Gzip on; gzip_static on;-it's important to access loaded or uncompressed files without adding them.

Front-end configuration config/index.js:

ProductionGzip: true

Then introduce the plug-in compression-webpack-plugin

Pay attention to the version "compression-webpack-plugin": "^ 1.1.12"

The first two file sizes have not been reduced much, the most when using the third one.

The above is about the content of this article on "how to optimize the js file generated by vue packaging". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.