exclude

Loader specifies to exclude files under node_modules, reduce the file range, and reduce the time required by various Loaders to process files.

    {
        test: /\.js$/.loader: "babel-loader".exclude: /node_modules/
    }
Copy the code

Dllplugin

Dllplugin is used to compile and package the base modules of web page dependencies into separate dynamic link libraries. In this way, a dynamically linked library containing a large number of reusable modules only needs to be compiled once, and modules included in the dynamically linked library will not be recompiled in the subsequent build process, but will directly use the code in the dynamically linked library.

First, access Dllplugin to build common modules once, and generate manifest.json file, which clearly describes which modules are contained in the corresponding DLl. js file, as well as the path and ID of each module.

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom'],
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'build'),
    library: '_dll_[name]',
  },
  plugins: [ 
    new DllPlugin({
      name: '_dll_[name]',
      path: path.join(__dirname, 'build', '[name].manifest.json'),
    }),
  ],
};
Copy the code

The DllReferencePlugin is then introduced in the normal configuration

plugins:[
    new DllReferencePlugin({
        manifest: require('./build/mainfest.json')
    })
]

Copy the code

Implementation process: the development process first webpack –config webpack.dll. Js compile a dynamic link library, then normal webpack –config webpack.config.js can be.

HappyPack

Webpack itself is built in a single thread, and Happypack is designed to make WebPack break up tasks into multiple processes to execute them concurrently.

{ test: /(\.jsx|\.js)$/, use: 'happypack/loader? Exclude: /node_modules/}, {test: /\. CSS $/, use: 'happypack/loader? id=css' },Copy the code
New HappyPack({id:'js', loaders:['babel-loader']}), new HappyPack({id:' CSS ', threads:1, Loaders :['style-loader','css-loader']}),Copy the code

According to the need to load

CommonChunksPlugin was required for WebPack 4, but is not required for webPack 4 and is used by default. Specific configuration see segmentfault.com/a/119000001… .

Give names to dynamically generated chunks

import(/* webpackChunkName:"detail" */'./detail').then(({default}) = > {})
Copy the code

Supporting the above syntax also requires configuring the Babel plug-in.

npm install babel-plugin-syntax-dynamic-import -D
Copy the code

And then add to the plugins in.bablerc.

{
  "plugins": ["syntax-dynamic-import"]}Copy the code

At the same time, if you use React, you can use the Suspense component directly for lazy loading.

Visual analysis tool

  • webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

Copy the code

The last

These are just the optimization methods that have been adopted in the project. I will keep looking for other solutions to try out and keep updating this article.