首页
前端开发
Webpack
Webpack-bundle-analyzer在Vue CLI 3中的使用分析

Webpack-bundle-analyzer在Vue CLI 3中的使用分析

0 次浏览 0 条评论
pdf
pdf

在开发 Vue 项目的时候，有时需要打包后的文件，看看哪些模块比较大，或者依赖占了多大比例。webpack-bundle-analyzer就能你做这个。通过图形化的方式，项目的体积构成。嗯，使用起来挺，像我最近在用 Vue CLI 3 时，就是通过在 vue.config.js 里添加配置就搞定了。

，执行 npm install webpack-bundle-analyzer -D 安装这个插件。在根目录下的 vue.config.js 文件里（如果没有就自己创建）添加以下配置：

module.exports = {
  chainWebpack: config => {
    config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
  }
}

完成配置后，运行 npm run serve，就能在浏览器里看到清晰的可视化结果，你快速定位优化点。其实就是通过这个插件，你能更直观地看出每个模块占用的大小，哪些是可以优化的地方。

，除了打包，webpack-bundle-analyzer 也能为你一个清晰的项目依赖结构，避免不必要的重复引入。你如果遇到打包过大的问题，可以试试看这个工具。

另外，如果你对其他版本的 Vue CLI 配置感兴趣，可以查看一下相关资料，了解 Vue CLI 4 或 webpack 相关的配置方法。

pdf 文件大小：62.52KB