Optimize VUE packaing by external importing to reduce the page loading time greatly for ESP8266 programmable controller.

#vue #esp8266 #cloud

Import external packets via CDN to optimize the size of js packets of VUE and improve the loading speed of remote device management control system of ESP8266 programmable controller.
In the past few days, I started to modify the programmable controller's cloud management system to integrate into WeChat Public Account for convenient control without APP and to realize the cloud functions such as cloud phone alarm, data logging and analysis.

Then, after generating a web page through "cnpm run build" and opening the page with a browser, if it is loaded firstly without local cache, it took about 15 seconds to load and display the login or device list page, it's too long to seriously affect the user experience.
Among the files loaded, the file named vendor.xxxx.js has a size of 6 MByte and took about 12 seconds.

The Webpack packaging tool generates this file by packaging together the components imported by the web page.

Install the webpack-bundle-analyzer component and configure webpack.base.config.js to
plugins: [
new BundleAnalyzerPlugin
], and
After the building, automatically open the page, It can be found that the element UI in the vendor.js takes up the most space, reaching 6Mbyte.
This is because, when main.js imports element UI, it does so by
import ElementUI from 'element-ui'
which imports the entire element-UI.

The space occupied by element UI can be reduced by partial import;
For example.
import { MessageBox } from 'element-ui';

In addition, instead of packaging the element-UI into vendor.js, it can also load the js and css files from the CDN via script and link tags in index.html. The advantage of doing so is that the browser will download these files from the public CDN servers, so the bandwidth is guaranteed, and it doesn't consume the bandwidth and CPU resources of the cloud server, reduce the investment cost of the cloud server.

In webpack.base.config.js, add a note about externals.
externals: {
'vue': 'Vue', 'element-ui': {
'element-ui': 'ELEMENT'
}
Remove the vue as well as element UI imports in main.js.
Add loading of js and css files in index.html;
``
After the process, the file size of vendor.js is reduced from 6.8MByte to 2.0MByte;
Without no cache, the page loading time reduced from 15s to 3s, which is perfect.