vue-cli3 添加webpack-bundle-analyzer

最新推荐文章于 2023-11-20 15:13:28 发布

longyvfengyun

最新推荐文章于 2023-11-20 15:13:28 发布

阅读量1.5k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： vue cli3 文章标签： vue js

本文链接：https://blog.csdn.net/longyvfengyun/article/details/106684723

vue cli3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用webpack-bundle-analyzer插件分析Vue项目打包后的文件占比，通过按需加载element-ui来减小打包体积。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、webpack-bundle-analyzer作用

使用webpack-bundle-analyzer可以分析打包后你所打包内容的占比，从而找到最大的模块，然后让我们更加有目的，从容的去优化项目。

二、安装和配置插件

本次安装的前提是使用vue-cli3，在项目文件中创建vue.config.js(ps:vue cli3 配置文件)

使用npm或cnpm安装webpack-bundle-analyzer如下：

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

配置vue.config.js如下：

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

module.exports = {
   	...
    configureWebpack: {
        plugins: [
            new BundleAnalyzerPlugin({ analyzerPort: 8920 })
        ]
    },
    
}

然后运行打包命令如下：

npm run build

然后会自动打开浏览器并显示类似于下图：在这里插入图片描述
通过分析文件分布图可以得出，最大的是element-ui.common.js.在当前项目中我并没有采用按需加载的方式导入element-ui框架导致打包的单文件过大。后期可以使用按需加载的方式，从而减少element-ui.common.js的体积。