This week, I mainly wrote a small project of full stack in the company. After fixing a series of small problems, I mainly need to solve the problem of loading time.

The load time of this project is divided into two main parts: the time for the back end to read data from AWS, and the time for the front end page to load.

On the back end, the reason for the slow data reading was that each time the data was retrieved, a new retrieval execution ID was generated to retrieve the database and return the required data. In fact, this data is already cached on AWS. If the data does not change frequently, the back end can directly request the previously cached results for the same retrieval statement. Modified an example given in AWS to add a request caching part, and solved the backend problem.

The packaging size of the front-end page has an impact on the first load time of the page. Especially in the case of the network is not very good, if the resource of the web page is too large, the user will wait too long. I did a prototype project in a school project before, the front end was not optimized, but the package was several MB.

There was no requirement to release to production at the time, just a demo, so the focus was not on optimization. This time, for internal tools, quality is absolutely guaranteed.

React + Ant Design V3 + MobX was used as the front end of the project. Bizchart is used by several data visualization components. The goal of optimization is to minimize the size of bundle.js.

At first, bundle.js was nearly 4MB in size.

First, take a look at the size of each package with the BundleAnalyzerPlugin.

yarn add -D webpack-bundle-analyzer
Copy the code

// webpack.config.js 

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// add to plugins
plugins: [
    new BundleAnalyzerPlugin({ analyzerPort: 8999 }), // The default port is 8888
]
Copy the code

Run YARN Build again and you will see the page that analyzes the package size:

The picture at that time shows antD. CSS and bizchart.js are both dominant. The components of And Design are configured to load on demand, but the CSS for the components is not configured at the time. BizChart is also not configured to load on demand.

The configuration is loaded on demand

The first is Ant Design.

Install less and less-loader. Since the newer version no longer supports Inline JavaScript, the two versions specified below are installed:

Yarn add -d [email protected] [email protected]Copy the code

Set up the Webpack resolve.less file:

// webpack.config.js

module: {
    rules: [
     // ...
        {
            test: /\.less$/,
            use: [
                {
                    loader: "style-loader",
                },
                {
                    loader: "css-loader",
                },
                {
                    loader: "less-loader",
                    options: {
                        javascriptEnabled: trueLessOptions: {paths: [path.resolve(__dirname,"node_modules"],},},},],},]}Copy the code

After the configuration is complete, remove the code that introduced ANTD.css from the project. In this way, Ant Design styles are loaded on demand.

Next is BizChart. Refer to the official document and introduce the components as described above to complete the loading on demand:

The ability to load resource files on demand is supported from [email protected].

import Chart from 'bizcharts/lib/components/Chart';
import Axis from 'bizcharts/lib/components/Axis';
import Line from 'bizcharts/lib/components/TypedGeom/Line';
// If there are other components, they can be introduced in a similar way, taking care to determine whether to refer to TypedGeom or directly
Copy the code

At this point, the bulk of the packaged files are loaded on demand, and the packaged files are smaller.

Another common optimization is to use dynamic linking, but the size of the package file didn’t change after I configured it. It could also be that THERE is a problem with my configuration, which needs to be looked into later.

Gzip compression

In addition to the implementation of on-demand loading, other Webpack plug-ins used after the temporary effect is not very good. However, on that visualization of packaged files, you can actually see another set of data: the Gzip compressed file size. For this project, you can compress the file down to 600 KB. This is quite an improvement from before optimization. I did some Internet research and Gzip was relatively easy to implement.

First, add a setup item to the request header:

service = axios.create({
    // ...
    headers: {"accept-encoding": "gzip"}});Copy the code

Then, install the compression-webpack-plugin:

yarn add -D compression-webpack-plugin
Copy the code

In Webpack Settings add:

plugins: [
    new CompressionPlugin(),
]
Copy the code

Run yarn Build again and you will see a bundle. Js. gz file that is only 600KB.

On the server, you also need to configure Gzip. The project server uses Nginx and is configured as follows:

server { gzip on; gzip_static on; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_proxied any; gzip_vary on; gzip_comp_level 6; gzip_buffers 16 8k; Gzip_http_version 1.1; . }Copy the code

When you restart the Nginx server and reload the page, you see that the bundle.js file is indeed 600KB in the Network column of the browser developer tools. And you’re done!

summary

This paper records the initial optimization process of Webpack configuration of the project, mainly realizing the on-demand loading of components and compression of packaged files. Although the final result is not ideal, it is a good improvement compared with the beginning and can meet the needs of internal use. Later, as the project becomes more complex, other plug-ins to optimize the packaging process and results will be explored.

Refer to the article

medium.com/@selvaganes…

Refactoring road: WebPack volume optimization juejin.cn/post/684490…

---

Articles are published simultaneously on the blog