Writing is not easy, without the permission of the author forbid to reprint in any form! If you think the article is good, welcome to follow, like and share!

Webpack analysis

Share time and file analysis tools for easy packaging optimization.

Packaging time analysis

  • If you want to see the packing time for each Loader and Plugin, you can use a Plugin called speed-measure-webpack-plugin

    • Note: This Plugin has some compatibility issues with the latest WebPack release (incompatible with some plugins).
    • Until 2021-3-10, but the plug-in is still under maintenance, so you can wait for the follow-up update;

  • The installation

    • npm i speed-measure-webpack-plugin

  • use

    • Create the object SpeedMeasurePlugin for the plug-in export;
    • Wrap our exported WebPack configuration with smp.wrap;
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
const smp = new SpeedMeasurePlugin()

module.exports = function (env) {
    const isProduction = env.production;
    process.env.NODE_ENV = isProduction ? "production" : "development"

    const config = isProduction ? prodConfig : devConfig
    const webpackConfig = merge(commonConfig(isProduction), config)
    return smp.wrap(webpackConfig)
}
Copy the code
  • The effect

Analysis of the packaged file

Scenario 1: Generate stats. Json file

  • Edit the NPM script
"stats": "webpack --config ./config/webpack.common.js --env production --profile --json=stats.json".Copy the code

  • Run NPM run stats

    • A stats.json is generated in the root directory

  • Json file content is complex, files can be uploaded to the webpack. Making. IO/analyse/analysis

  • The effect

Solution 2: Use Webpack-bundle-Analyzer

  • The installation

    • npm install webpack-bundle-analyzer

  • webpack.common.js

const {BundleAnalyzerPlugin} = require("webpack-bundle-analyzer")

plugins: [new BundleAnalyzerPlugin()
]
Copy the code

  • When packaging webpacks, the tool opens a service on port 8888 so we can visually see the size of each package.

    • For example, if a package is packaged in a single Vue component, but it is very large, we can consider whether we can split it into multiple components and load it lazily.
    • For example, an image or font file is particularly large, whether it can be compressed or other optimization;

  • The effect

  • Nuggets: LeBron on the front end

  • Zhihu: LeBron on the front end

  • Keep sharing technical blog posts, follow wechat public account 👉🏻 front-end LeBron