webpack打包体积优化---插件 webpack-bundl

NPM：

一 安装

npm install --save-dev webpack-bundle-analyzer

二 配置
在webpack.prod.conf.js中增加以下配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {

  plugins: [

    new BundleAnalyzerPlugin()

  ]

}

配置package.json 文件，默认会打开http://127.0.0.1:8888作为展示。

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

三 运行

npm run analyz

Yarn:

一 安装

yarn add -D webpack-bundle-analyze

二 配置

配置webpack.config.js文件：

module.exports = {

    chainWebpack: config => {

        if (process.env.NODE_ENV === 'production') {

            config.optimization.splitChunks({

                cacheGroups: {

                    vendors: {

                        test: /[\\/]node_modules[\\/](vue|axios)[\\/]/,

                        name: 'chunk-vendors',

                        chunks: 'all'

                    }

                }

            })

            config

                .plugin('webpack-bundle-analyzer')

                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

        }

    }

}

配置package.json 文件,默认会打开http://127.0.0.1:8888作为展示。

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

三 运行

yarn analyz