webpack插件 --- webpack-bundle-analyzer【查看包体积】

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 清除注释
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 开启压缩// 是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// 本地环境是否需要使用cdn
const devNeedCdn = true;// cdn链接
const cdn = {}module.exports={publicPath: '/',assetsDir: "assets",devServer: {open: true,  // npm run serve后自动打开页面host: '0.0.0.0',  // 匹配本机IP地址(默认是0.0.0.0)// port: 8066, // 开发服务器运行端口号proxy: {'/api': {                                //   以'/api'开头的请求会被代理进行转发target: 'http://localhost:6688',  changeOrigin: true}},disableHostCheck: true,},//去除生产环境的productionSourceMapproductionSourceMap: false,chainWebpack: config => {// ============注入cdn start============config.plugin('html').tap(args => {// 生产环境或本地需要cdn时，才注入cdnif (isProduction || devNeedCdn) args[0].cdn = cdnreturn args})// config.plugin('webpack-bundle-analyzer') // todo 查看打包文件体积大小1//   .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)// ============注入cdn end============},configureWebpack: (config) => {// 用cdn方式引入，则构建时要忽略相关资源const plugins = [];if (isProduction || devNeedCdn){config.externals = cdn.externalsconfig.mode = 'production';config["performance"] = {//打包文件大小配置"maxEntrypointSize": 10000000,"maxAssetSize": 30000000}config.plugins.push(new UglifyJsPlugin({uglifyOptions: {output: {comments: false, // 去掉注释},warnings: false,compress: {drop_console: false,drop_debugger: false,// pure_funcs: ['console.log']//移除console}}}))// 服务器也要相应开启gzipconfig.plugins.push(new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: /\.(js|css)$/,// 匹配文件名threshold: 10000, // 对超过10k的数据压缩deleteOriginalAssets: false, // 不删除源文件minRatio: 0.8 // 压缩比}))// todo 查看打包文件体积大小2config.plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'server',analyzerHost: 'localhost',analyzerPort: 8889, // 修改为其他未被占用的端口openAnalyzer: true,}))}}}