webpack-bundle-analyzer的使用

发表于 | 分类于 | 评论数： | 阅读次数：

webpack-bundle-analyzer是 webpack 的一个插件,用来生成代码分析报告,用来提高代码质量和网站性能.

安装

1
2
3
4
# Nnpm
npm i -D webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

在 vue 项目中使用

配置vue.config.js

1
2
3
4
5
6
module.exports = {
  publicPath: "./",
  chainWebpack: config => {
    config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
  }
};

接着执行yarn serve或者yarn build来在 localhost:8088生成报告,如下:

img

在这张图里我们可以清晰地看到项目的各种依赖.
同时发现问题:在 moment.js库中存在着我们用不到的 locale(国际化内容),同时 moment 本身体积也比较大.
img

优化方案

选用其他库来替代体积庞大的 moment.

后来找到这么一个库dayjs

用来替代 moment.

img

1
2
3
4
5
6
# 卸载 moment
yarn remove moment

# 安装 dayjs

yarn add dayjs

在 main.js 中修改配置:

因为dayjs 的作者说 api 与 moment 的 api 相同,为了不修改以前的代码,我们这里稍微偷点懒:

1
2
3
4
5
6
7
8
9
10

// 修改前 :

import  moment from "moment";
Vue.prototype.$moment = moment;

// 修改后 :

import dayjs from "dayjs";
Vue.prototype.$moment = dayjs;

测试下,系统没有报错,nice.

img

看下 8088端口下的分析报告:

img

moment 库已经没有了,因此我们项目模块大小也减少了大概 200 多 KB,

awesome.

thank u !