Home > Developer > Web Develop
Webpack Plug-inPresumably a lot of people have been through the completion of a project, and then packaging found that some files are very large, resulting in a slow page load, which affects the user experience, so after I went through some packaging, talk about how to effectively reduce the volume of the package, to speed up the page's first screen rendering
Used VUE-CLI created projects, should be able to see, these plug-ins, in the build/webpack.prod.conf.js file can be observed in the plug-ins, using the REACT project can be matching, using the same plug-ins;
What do I use to decide, in my discretion, to introduce the role of some major plugins:
console.log options, but also can effectively reduce the package volumeHere is a description of all plugins:
https://webpack.docschina.org/plugins/
Here I enclose the volume of the packaged file in my project, which is built using VUE-CLI:
You can see that the largest volume is vendor.js this file
This project occupies the file basically is the code of the package used, such as Vue, Vuex,vue-router,element-ui and other files of the JS code
I used to search the compressed code of the blog, often also see DLL plug-in can compress the volume, but the practice proved that this conclusion is wrong;
His role is to speed up the run build and run Dev, but there is no advantage compared to using CDN acceleration, and here's a look at
File size after adding a DLL:
Add the file size after optimizing the JS code:
Through the picture to see the file is compressed, but still do not have my normal file small, perhaps I optimize the problem, but again optimization, at most, and the normal situation is similar, still no compression volume of the role;
It can be concluded that Dllplugin is basically only used in the development environment;
Using CDN AccelerationFor now, this is the best way to do it;
Can first use Analys analysis, vendor the largest occupied plug-in, according to the results of the selection;
For example, my project Element-ui and Vue JS files occupy the first and second size, so the 2 files need to use CDN acceleration to replace;
It is important to note that the CDN files are not too much, try not to exceed 3 files
You can use the Free BOOTCDN acceleration http://www.bootcdn.cn/
The method is simple, add CDN address in index.html:
<body> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.3.7/index.js"></script> <div id="app"></div></body>
Note that you need to put the file in front
In Main.js and any reference to the Vue file: Delete import Vue from ‘vue‘ , if there is a not deleted, then the package will also refer to the file;
and delete import ElementUI from ‘element-ui‘ andVue.use(ElementUI)
If you add eslint it, you may be able to use the error to const Vue = window.Vue remove the error,
If you still need to use element in Main.js, you can window.ELEMENT refer to it by reference;
Package volume can be reduced effectively after packaging:
The compression code of this method is very scary, the compression rate of up to 70%, but need to understand is the need to open the server gzip acceleration to work, I did not use this method, do not rule out that he will cause a certain pressure on the server, if the project is important enough or not worry about the server pressure problems, can be assured that use, But in addition to this approach, using CDN acceleration is the best way to do it now;
My current project is also using CDN acceleration to reduce the package volume;
If the server supports gzip acceleration and does not worry about server pressure, then you can use gzip to speed up, otherwise use CDN to accelerate the main file method to compress the code, of course, you also need to add the Webpack plug-in to optimize the JS code;
Talk about Webpack packaging how to compress package file size
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
