1. Problems

　　It only takes about 1s to open the project code in the test environment, but it takes about 12s to open the page in the official environment. It is really annoying to respond so slowly. Although there must be a big reason for the network, the front-end code loading also needs to be optimized. Just do it.

I took a look at the browser developer tools and found that the front-end loaded all the code files of the entire project. I was also drunk (because I just took over this project from a colleague). The biggest problem is here.

Code optimization is very important, but it takes a long time to optimize the packaging code of webpack.

Second, the solution process

In this project, I didn't see the configuration file of webpack, only by changing the vue.config.js file, the detailed parameters can be found online.

1. Delete the map file

Although this has no great effect on accessing the page, I checked it and found that there is a security risk in this file when packaging, and then I set the parameters to delete it.

productionSourceMap: false,  // does not generate map file, reducing file size

The parameters are set in the vue.config.js file. After the package is built, the size of the built folder compressed package is reduced by half.

2. Load components asynchronously

I saw that many components of my colleagues are loaded synchronously with input, which feels like it will delay time, so I changed it to asynchronous loading components.

 // synchronous loading
import Information from '@/components/rfmModel/basicInformation.vue';

 // Asynchronous loading
const Information= () => import('@/components/rfmModel/basicInformation.vue');

3. Turn on gzip compression

Compression can reduce the volume when packing.

(1) Installation

npm install compression-webpack-plugin -D

(2) There is a configureWebpack parameter in vue.config.js. In the object returned by configureWebpack, add plugins to the object attribute plugins array

const CompressionWebpackPlugin = require("compression-webpack-plugin");

 1 configureWebpack: (config) => { 
 2     return {
 3         plugins: [
 4             new CompressionWebpackPlugin({
 5                 test: /\.js$|\.html$|\.css/, //match filename
 6                 threshold: 9040,  //to more than 9040 KB files are compressed
 7                 // deleteOriginalAssets: false //whether to delete source files
 8             }),
 9         ],
10     }
11 },

4. Introduce on demand

lodash-webpack-plugin is used in combination with babel-plugin-lodash, but after configuring this, my problem above is still not solved.

(1) Installation

npm i -S lodash-webpack-plugin babel-plugin-lodash

(2) Configuration

var LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

configureWebpack: (config) => { 
        return {
            plugins: [
                new LodashModuleReplacementPlugin(),
            ],
       }
}

As for babel-plugin-lodash, I saw that the webpack configuration exported from the project document is already configured. After checking it, there are two configuration methods:

① Configure "plugins" in .babelrc: ["transform-runtime", "transform-vue-jsx", "lodash"]

②Configure in rules

1 {
2       test: /\.(js|jsx)$/,
3       loader: 'babel-loader',
4       exclude: /node_modules/,
5       include: [resolve('src'), resolve('test')]
6       options: {plugins: ['lodash']}
7 }
8         

5. Cut code and merge common modules

webpack4 has deprecated CommonsChunksplugin in favor of splitChunks. I don't know much about this, but the specific parameters can be found on the official website.

 1 configureWebpack: (config) => {  
 2         optimization: {
 3             splitChunks: {
 4                 cacheGroups: {
 5                     vendor: {
 6                         priority: 10, //add weight
 7                         test: /node_modules/, //Extract the libraries in this directory that meet the following conditions
 8                         name: "vendor",
 9                         enforce: true
10                     },
11                     common: {
12                         //public module
13                         chunks: 'all',
14                         minChunks: 2 // Minimum number of blocks that must share modules before splitting
15                     }
16                 },
17                 chunks:"all", 
18                 minSize: 400000
19             }
20         },
21     }
22 },

6,html-webpack-plugin

This is to solve the problem of loading all the code files above. After checking it, its main function is:

① Dynamically add a hash after each compilation to the external resources such as script and link introduced in the html file to prevent the problem of referencing cached external files

②You can generate and create html entry files. For example, a single page can generate an html file entry, and configure N html-webpack-plugin s to generate N page entries.

It doesn't seem to have anything to do with my problem above, but it solves my troubles, God, why is this! ! !

(1) Installation

npm i -S html-webpack-plugin

(2) Configuration

let HtmlWebpackPlugin = require('html-webpack-plugin');

 1 configureWebpack: (config) => {  
 2     return {
 3         plugins: [
 4             new HtmlWebpackPlugin({
 5                 template: './public/index.html',
 6                 hash: true, // Whether to add for all injected static resources webpack The only one generated per compilation hash value
 7                 inject: true // Towards template or templateContent Inject all static resources in
 8             })
 9         ],
10     }
11 },

I haven't tried to configure webpack myself before, it took a long time, and I only got a lot of pits, and continue to work hard.