vue3.0 打包查看资源占比

安装资源包

yarn add webpack-bundle-analyzer -D

在vue.config.js配置

const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    // 相对的目录，配置 ./ build后也可以本地访问
    publicPath: './',

    // 是否改变的文件名需要加哈希。除了public的文件外
    filenameHashing: true,

    // build后输出的文件夹的名称
    outputDir: 'dist',

    // 开发环境下服务的配置
    devServer: {
        hot: true, //自动保存
        open: true, // 是否自动打开浏览器 
        https: false, // 是否支持https
        host: '0.0.0.0',
        port: 8080,
        // 跨域配置
        proxy: {
            '/api': { //此处并非一定和url一致。
                target: 'https://dev2021/',
                // target: 'http://192.168.43.19:9999',
                changeOrigin: true, //允许跨域
                ws: true,
                pathRewrite: {
                    '^/api': ''  // rewrite path
                }
            }
        }
    },
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    // 建议用的移动端布局 https://github.com/evrone/postcss-px-to-viewport
                    require("postcss-px-to-viewport")({
                        unitToConvert: "px", // 需要转换的单位，默认为"px"
                        viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750.
                        // viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334.
                        unitPrecision: 3, // 指定px转换为视窗单位值的小数位数（很多时候无法整除) 保留三位精度.
                        propList: ["*"],
                        viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw.
                        fontViewportUnit: "vw",
                        selectorBlackList: ['van'], // 指定不转换为视窗单位的类
                        minPixelValue: 1, // 小于或等于1px不转换为视窗单位
                        mediaQuery: false,
                        replace: true,
                        exclude: /(\/|\\)(node_modules)(\/|\\)/,
                    })
                ]
            }
        }
    },

    chainWebpack: config => {
        // 路径配置。 @ 默认已经配到了src下
        config.resolve.alias.set('assets', resolve('src/assets'));
        
        
        // 打开打包报告
        config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    },

}

打包后效果图

image.png