Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to optimize the Vue component library". In the daily operation, I believe that many people have doubts about how to optimize the Vue component library. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to optimize the Vue component library". Next, please follow the editor to study!

Optimize lodash

The first thing that comes to mind is that instead of using the lodash library, replace the logical part of the implementation using lodash with the native JavaScript, and then release and find that the component has been greatly reduced.

After removing lodash

Optimize moment

For the moment library, it contains a lot of locale files to support its internationalization capabilities. The moment library will be large for the project. For moment optimization, another optimization method is used: using external moment.

Configure in vue.config.js:

ConfigureWebpack: {

Externals: {

Moment: 'moment'

}

}

Tell Vue CLI to use the moment library, we use external, do not need to be packaged into components. Just tell Vue CLI, and add moment-related references to index.html:

After the configuration is complete, we compile again:

You can see that the effect of optimization is very obvious, and the packet size of 80% + is directly optimized.

At this point, the study on "how to optimize the Vue component library" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.