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

This article introduces the knowledge of "how vue makes packaged js files smaller". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Usually in a vue project will use a lot of plug-ins, swiper,axios,vuerouter,vuex, … Then using a lot of plug-ins is bound to cause the packaged js file to be too large, affect the loading speed, and cause a bad user experience, so let me summarize the packaging method myself (make the js file smaller)

The command I use is vue ui visual packaging operation.

Enter the visualization panel

By default, the project generated by vue-cli 3.0 hides the webpack configuration item, if we need to configure webpack

Need to be configured through vue.config.js

Create a vue.config.js file in the project root directory

Module.exports = {chainWebpack:config= > {/ / release mode config.when (process.env.NODE_ENV = = 'production',config= > {/ / entry found the default packaging entry To call clear, delete the default packaging entry / / add and add a new packaging entry config.entry ('app'). Clear (). Add ('. / src/main-prod.js')}) / / Development mode config.when (process.env.NODE_ENV = = 'development' Config= > {config.entry ('app'). Clear (). Add ('. / src/main-dev.js')}}

Add:

ChainWebpack can modify webpack configuration by chain programming.

ConfigureWebpack can modify webpack configuration in the form of operands.

* 7. Load external CDN

By default, all third-party packages for dependencies are packaged into js/chunk-vendors.

.js file, causing the js file to be too large

Then we can exclude these packages through externals so that they are not packaged into js/chunk-vendors.

Module.exports = {chainWebpack:config= > {/ / release mode config.when (process.env.NODE_ENV = = 'production',config= > {/ / entry found the default packaging entry To call clear, delete the default packaging entry / / add and add a new packaging entry config.entry ('app'). Clear (). Add ('. / src/main-prod.js') / / use externals to set the exclusion item config.set ('externals', {vue:'Vue',' vue-router':'VueRouter') Axios:'axios', moment:'moment'})) / / Development mode config.when (process.env.NODE_ENV = = 'development',config= > {config.entry (' app'). Clear (). Add ('. / src/main-dev.js')})}

Using cdn to introduce external js in index files in public, the volume of js files packaged from then becomes smaller.

Let's take a look at the js volume size that is packaged without using externals to set the exclusion.

Let's take a look at setting the size of the exclusion item using externals.

It is obviously smaller, and the loading speed of running the project on the server is much faster.

This is the end of the introduction to "how vue makes packaged js files smaller". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.