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

This article mainly explains "how to solve the problem of excessive file size after vue project packaging". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve the problem of excessive file size after vue project packaging".

Why is the file too large after packing?

Mobile app project, using vue-cli scaffolding to build, UI mainly uses Muse-UI, in the development process to meet the needs, mixed with some components of Element-UI, coupled with team development, the front end more than one person to participate, in the absence of unified specification constraints, coding styles and methods are very different. Confusion, resulting in too much dependency, webpack packages all the libraries together, so the vendor.js file and app.js file are very large, and the final appearance of the first page will be a long white screen, affecting the user experience.

How to solve the problem quickly

When optimizing complex projects, only increasing but not decreasing can greatly reduce the risk. Bug can be controlled, which not only ensures the normal operation of the project, but also reduces unnecessary workload.

1. Route lazy loading [using import () method of es6 proposal]

The import () method of the es proposal is recommended because it is also referenced by import when the previous route definition is not modified. If you use vue routing to load the component lazily, there are many changes and it is not fast enough.

The reference method after modification is as shown in the figure, that is:

Change import login from'@ / views/login/login' to

Const login = () = > import ('@ / views/login/login')

Other routing configurations do not need to be changed.

2.CDN introduction

Use cdn to load dependencies on index.html pages

Add webpack.base.conf.js configuration

Externals: {'element-ui':' ELEMENT', 'vue':' Vue', 'querystring':'Qs',' vue-router': 'VueRouter',' MuseUI': 'MuseUI',' axios':'axios', 'jquery': "jQuery", "EXIF":' EXIF', 'echarts':' echarts'}

Whenever possible, use cdn to reference the dependencies of references in main.js in index.html.

The cdn of most open source libraries can be found in the CDN acceleration service of the open source project

It is not recommended to delete the dependency references in the main.js directly when optimizing the formed project. If you delete them, you need to reintroduce them in the public JS or import them in the required dependency pages, and note that the names defined at the time of import need to be consistent with the dependent reference variable names that already exist in the project, which will increase your workload. If you want to build a new project or want to further learn to make the code more pure, you can go to du Niang to find information and research.

In this way, the optimization is over, and the size of the packaged file is as follows:

Vendor.*** file size reduced from 1.98m to 342K

App.*** file size reduced from 573K to 53.3K

Page loading speed:

The time taken to enter the first page decreased from an average of 13.6S to an average of 1.12S, almost in seconds.

Finally, the image material used in the project is compressed, and the config/index.js productionSourceMap: false is modified to remove the .map file when packaging, so as to speed up the packaging.

Thank you for your reading, the above is the content of "how to solve the problem of excessive file size after vue project packaging". After the study of this article, I believe you have a deeper understanding of how to solve the problem of excessive file size after vue project packaging, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.