Webpack is a mainstream modular packaging tool with powerful functions. When using Webpack, if you do not pay attention to performance optimization, there is a great possibility of performance problems. Performance problems are mainly divided into slow packaging and construction speed during development, repetitive work during development and debugging, and low output file quality. Therefore, performance optimization is mainly analyzed from these aspects.

1. Development environment optimization

1.1 resolve. Modules

Tell WebPack to look for third-party modules under that folder, avoiding layers of searching

resolve:{
    modules:[path.resolve(__dirname,'node_modules')]
}
Copy the code

1.2 resolve. Alias

For some third-party comparison libraries, specify their folder location to avoid layer upon layer search

resolve:{
    alias:{
       'vue':patch.resolve(__dirname, './node_modules/vue/dist/vue.min.js'),
       'react':patch.resolve(__dirname, './node_modules/react/dist/react.min.js') 
    }
}
Copy the code

1.3 When configuring the Loader, use Test, exclude, and include to narrow the search scope

1.4 Enable Multi-threaded parsing of Happypack

I usually use it when parsing JS files

module:{
    rules:[
        {
            test: /(\.js|\.jsx)$/,
            exclude: resolve(__dirname, 'node_modules'),
            use: ['happypack/loader?id=babel'],
        },
    ]
},
plugins:[
    new happypack({
        id:"babel",
        loaders:[
            {loader:'babel-loader?cacheDirectory=true'}
        ]
    })
]
Copy the code

1.5 Enabling paralleUgilifyPlugin multi-threaded compression JS file

New ParallelUglifyPlugin({uglifyJS: {output: {// remove beautify: false, // remove comments: false}, compress: Drop_console: false}}}),Copy the code

1.6 Enabling HMR Replacement for a Hot Module

Module hot replacement does not refresh the entire web page but recompiles the changed modules and replaces the old ones with new ones

/ * * * enable webpack built-in webpack plugin (open HMR). * / new webpack HotModuleReplacementPlugin (),Copy the code
devServer:{
    hot:true
}
Copy the code

2. Production environment optimization

2.1 Extract CSS code MiniCssExtractPlugin separately

{
    test:/\.css$/,
    use:[MiniCssExtractPlugin.loader,css-loader]
}
Copy the code
new MiniCssExtractPlugin({
    filename:'css/[name].[hash:10].css'
})
Copy the code

CSS OptimizeCssAssetsWebpackPlugin 2.2 compression

new OptimizeCssAssetsWebpackPlugin()
Copy the code

2.3 Optimization of code segmentation

Optimization: {splitChunks: {chunks: 'all', minSize: 30000, // // Modules must be referenced at least once maxAsyncRequests: 5, // maxInitialRequests: 3, // Maximum number of entry requests automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, reuseExistingChunk: true }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }, runtimeChunk: { name: entrypoint => `manifest.${entrypoint.name}` } }Copy the code

2.4 Load on demand

import(/*webpackChunkName:"one*/'./one.js').then(data=>{
    console.log(data);
})
Copy the code

2.5 CDN Importing third-party Packages

The < body > < div id = "app" > < / div > < script SRC = "https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" > < / script > < / body >Copy the code
Externals :{jquery:" jquery ",// tell webpack which third-party packages are not included in the package to optimize the first screen loading speed}Copy the code

2.6 the source – the map

My usage:

devtool: process.env.NODE_ENV == 'development' ? 'eval-source-map' : 'cheap-module-source-map',
Copy the code

Removing useless code