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

  1. 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
  1. 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
  1. 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