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