1.Webpack Bundle Analyzer

Use of plug-ins

Analyze the specific file size after packaging by installing the webpack-bundle-Analyzer plug-in.

Do this in the vue.config.js file

chainWebpack(config) {    
    // Check the size of the package file
    config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
Copy the code

Configure commands in package.json

"scripts": {    
    "dev": "vue-cli-service serve"."build:prod": "vue-cli-service build"."build:report": "vue-cli-service build --report"  
},
Copy the code

Run NPM run build:report

The analysis report is as follows:

Then, analyze which files are too large and remove unnecessary dependencies. Reduce the size of the packed file.

For example, the vuE-3D-Model plug-in, which is not used at the end of the project, can be removed.

2. Webpack configuration:

optimization.splitChunks.chunks

It can also be configured in the vue.config.js file to cut large files into smaller ones.

configureWebpack: config= > {    
    // Cancel console.log in the production environment
    if (process.env.NODE_ENV === 'production') {      
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true      /* Compress package */      config.optimization.splitChunks.chunks = 'all';      config.optimization.splitChunks.minSize = 1000000;      config.optimization.splitChunks.maxSize = 3000000; }},Copy the code

After processing, pack. In gZIP, the largest files are just over 300 KB in size.