1. Extract CSS as a separate file and compress it
1. const MiniCssExtractPlugin = require('mini-css-extract-plugin'2. New MiniCssExtractPlugin({filename:'css/main.css'}) // Introduce plugin to specify CSS folder 3. {test: /\.css$/,
use: [MiniCssExtractPlugin.loader,
'css-loader'.'postcss-loader'Const OptimizeCss = require()'optimize-css-assets-webpack-plugin'5. New OptimizeCss(Copy the code
Compress HTML and JS
HTML new HtmlWebpackPlugin({template:'./src/index.html'// Create memory template filename:'index.html', minify: {// compress HTML removeAttributeQuotes:true,
collapseWhitespace: true
},
hash: true}) 2. Compress js new UglifyJsPlugin({cache:true, // add cache parallel:true// Concurrent packagingsourceMap: true}) 3. Cache <! --js cache --> {test: /\.(js|jsx)$/,
include: resolvePath('.. /src'), exclude: /node_modules(? ! (\/|\\)bowser)/, loader:'babel-loader',
options: {
cacheDirectory: true}} <! --> new MiniCssExtractPlugin({filename:'css/main.[contenthash:8].css'/ / CSS cache})Copy the code
3, Tree shaking
- You must use ES6 modularity
- Enable production mode
4. Code segmentation
- Pull out the common code
- Separate the entry file from the node_modules file code
Optimization: {splitChunks: {// code segmentation cacheGroups: {vendors: {vendors: {test: /node_modules/, // Remove third-party modules, such as jquery chunks:'all',
name: 'vendors',
priority: 2,
enforce: true
},
app: {
chunks: 'all'// Remove file name from common import:'app', minChunks: 5, minSize: 3000, priority: 1}}}Copy the code
5. Multithreading packaging
1. thread-loader
{
test:/\.js/,
use:[
{
loader:'thread-loader',
options:{
workers:2
}
}
]
}
2.happypack
let happypack = require('happypack');
{
test: /\.js$/,
use: 'happypack/loader? id=js'
}
new happypack({
id: 'js',
use: [
{
loader: 'babel-loader'// Use Babel to convert es6 presets to es5 presets: ['@babel/preset-env'
],
plugins: [
'@babel/plugin-proposal-class-properties'
// '@babel/plugin-transform-runtime']}}]}),Copy the code
6, externals
- Use CDN and refuse to pack
index.html
<script src='xxxxxx.jquery.min.js'></script> externals:{//'jQuery'
}
Copy the code
7, dllplugin
- New webpack. DLL. Js
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry: {
react: ['react'.'react-dom']
},
output: {
library: 'react'// Export filename as a library:'[name].dll.js'
},
plugins: [
new webpack.DllPlugin({
name: 'react',
path: path.resolve(__dirname, 'dist/manifest.json')]}})Copy the code
- Package. json adds a script
"dll": "webpack --config webpack.dll.js --mode=development"
3. Dynamic linking
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dist/manifest.json')
}),
new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, 'dist/react.dll.js')})]Copy the code
- A library that uses HTML to introduce static resources
add-asset-html-webpack-plugin
8. Reduce lookups
Exclude: / node_modules /, eliminate the include: path. Resolve ('src') containsCopy the code
9, ignoreplugin
new webpack.IgnorePlugin(/\.\/locale/,/moment/)
Copy the code
Lazy loading
- React and Vue both use the same approach
import('xxxx').then(data=>{console.log(data)})
Copy the code