It is mainly divided into two aspects: optimizing construction speed and optimizing output code

Optimize construction speed

  • Optimize construction speed
    • Babel-loader enables caching
    • IgnorePlugin Ignores useless modules
    • NoParse avoids repeated packaging
    • Happypack multi-process packaging
    • ParallelUglifyPlugin For multi-process compression of JS
    • Automatically refresh
    • Hot update
    • DllPlugin Dynamic link library plug-in
  • Available for use in production environments
    • babel-loader
    • IgnorePlugin
    • noParse
    • happypack
    • ParallelUglifyPlugin

Babel-loader enables caching

    test: /\.js$/,
    loader: ['babel-loader? cacheDirectory'].// Enable caching
    include: srcPath, // Select a range
    // exclude: /node_modules/ // exclude

Copy the code

IgnorePlugin Ignores useless modules

Why use it

  • Moment supports multiple languages, and there are a lot of unwanted language packs referenced
  • Use IgnorePlugin to ignore the reference


new webpack.IgnorePlugin(/\.\/locale/./moment/)
Copy the code

NoParse avoids repeated packaging

For example, react.min.js is a packaged file that does not need to be packaged again

module: {
  noParse: [/react\.min\.js$/]}Copy the code

Happypack multi-process packaging

  • Js single thread, enable multi-process packaging
  • Increase build speed
// Enable multiple processes on Babel
Module. rules - Pass the.js file to the HappyPack instance whose id is label
    test: /\.js$/,
    use: ['happypack/loader? id=babel'],},// Step 2 happyPack enables multi-process packaging
new HappyPack({
    // Use a unique identifier id to indicate that the current HappyPack is used to process a specific class of files
    id: 'babel'.// How to handle.js file, use the same as Loader configuration
    loaders: ['babel-loader? cacheDirectory']}),Copy the code

ParallelUglifyPlugin For multi-process compression of JS

  • Webpack has built-in Uglify tools to compress JS
  • Js single thread, open multi process compression faster
ParallelUglifyPlugin is used to compress the output JS code in parallel
new ParallelUglifyPlugin({
    // The argument passed to UglifyJS
    // Use UglifyJS compression again, just to help start multi-process)
    uglifyJS: {
        output: {
            beautify: false.// Most compact output
            comments: false.// Delete all comments
        compress: {
            // Delete all 'console' statements, compatible with Internet Explorer
            drop_console: true.// Inline variables that are defined but used only once
            collapse_vars: true.// Extract static values that occur multiple times but are not defined as variables to reference
            reduce_vars: true,}}})Copy the code

Automatic refresh (just know. Webpack-dev-server has this feature.)

module.export = {
  // Enable listening
  watch: true./ / default is false
  // Note: after listening is enabled, webpack-dev-server automatically opens the refresh browser

  // Listen for configuration
  watchOptions: {
    ignored: /node_mdules/.// Ignore the ones
    // Wait 300ms to execute the action after listening to the change to prevent the file update too fast and recompile too frequently
    aggregateTimeout: 300./ / the default 300 ms
    // Determine whether the file has changed by constantly asking the system whether the specified file has changed
    poll: 1000 // The default is to ask every 1000 milliseconds}}Copy the code

Hot update

The difference between automatic refresh and hot update

  • Automatically refresh
    • The entire web page is refreshed, slower
    • State is lost (data in the form is lost)
  • Hot update
    • Part of the refresh
    • State not lost
/ / HMR as a Webpack built-in function, can pass - hot or HotModuleReplacementPlugin open.

// Set index in entry
 index: [
    'webpack-dev-server/client? http://localhost:8080/'.'webpack/hot/dev-server',
      path.join(srcPath, 'index.js')]2 / / configurationIn the pluginsnew HotModuleReplacementPlugin()

3 / / configurationIn devServer add hot:true

4 / / configurationBusiness to to determine which ranges need to trigger hot updatesCopy the code

DllPlugin Dynamic link library plug-in

What problem was solved

  • Front-end frameworks such as Vue and React are bulky and slow to build

  • Relatively stable, not often upgraded version

  • Build the same version only once

  • Webpack already has built-in DllPlugin support

  • DllPlugin- Package out DLL files

  • DllReferencePlugin- Use DLL files

const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')
const { srcPath, distPath } = require('./paths')

module.exports = {
  mode: 'development'.// JS executes entry files
  entry: {
    // Put the React related modules into a separate dynamic link library
    react: ['react'.'react-dom']},output: {
    [name] is the name of the current dynamic link library.
    // React and polyfill configured in Entry
    filename: '[name].dll.js'.// Put the output files in the dist directory
    path: distPath,
    // Store the global variable name of the dynamic link library, for example, _dll_react
    // _dll_ is added to prevent global variable collisions
    library: '_dll_[name]',},plugins: [
    / / access DllPlugin
    new DllPlugin({
      // The global variable name of the dynamically linked library needs to be the same as that in output.library
      // The value of this field is the value of the name field in the output manifest.json file
      // For example, react. Manifest.json has "name": "_dll_react"
      name: '_dll_[name]'.// The name of the manifest.json file that describes the output of the dynamic link library
      path: path.join(distPath, '[name].manifest.json'),})],}Copy the code

Optimized output code

The target

  • It’s going to be smaller
  • Reasonable subcontracting, no repeated loading
  • Faster and less memory usage


  • Small picture base64 encoding
    • (Use url-loader to configure options.limit for images)
  • Bundle and hash value
    • ([name].[contentHash:8].js)
  • Lazy loading
    • ()=>import(”)
  • Extract common code
    • SplitChunks: Common code and tripartite code
  • IgnorePlugin
    • Ignore file does not introduce packaging
  • Use the CDN to accelerate
    • Add publicPath to output. Add publicPath to options in url-loader
    • Upload files using CDN
  • The use of production
  • Scope Hosting
    • Change scope

The use of production

  • Automatically turn on code compression
  • Vue and React automatically delete debug code
  • Start tree-shaking and remove useless code
    • The ES6 Module takes effect
    • Commonjs cannot
    • The reason:
      • ES6 Modules are statically imported and are imported at compile time
      • Commonjs is dynamically imported and is imported at execution time

Scope Hosting

A JS file packaged into a function, more files packaged after the function will be more. Use Scope Hosting to merge and reduce packaged functions

  • The code is smaller
  • Create functions with less scope