Vue-Cli2.x Project Optimization The introduction of local static library files

Demo Address: https://github.com/cag2050/VUE_CLI_OPTIMIMIZE_STATIC_RESOURCE

Vue-CLI puts a static resource file under the static folder and references:

1. Copy the corresponding xxx.min.js under Node_Modules, copy it to the project static folder

2.index.html Modify

Add Script introduction

       
3. Modify Build / WebPack.Base.conf.js :
Note out of this line


Resolve: {extensions: [‘.js’, ‘.vue’, ‘.json’ ], Alias: {// ‘Vue $’: ‘Vue / Dist / Vue.esm.js’, ‘@’: Resolve (‘src’),}},
   Add an Externals section (Externals and Resource Same Level). 
Externals: {‘Vue’: ‘Vue’, ‘Vue-Router’: ‘Vuerouter’},

 After optimization, speed comparison   
Optimized pre-compilation time

Optimized after compiling time

Optimized Build time

After optimization, Build time 300 ~ 400ms Optimized front file size: The above is all the contents of this article, I hope to have a learning to everyone Help, I hope everyone will support Tumi Clouds.
8435MS
Optimized file size:

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment