发布于 由admin

如何利用 Webpack Bundle Analyzer 分析 Vue 项目的打包体积，并进行优化？

各位靓仔靓女，晚上好！我是今晚的讲师，咱们今天聊聊如何用 Webpack Bundle Analyzer 这把手术刀，给 Vue 项目做个“瘦身”，让你的页面加载速度嗖嗖的。

一、Webpack Bundle Analyzer 是啥？

简单来说，Webpack Bundle Analyzer 就是一个 Webpack 的插件，它能以交互式可视化的方式，告诉你 Webpack 打包后的文件里都有些啥，哪些模块占用了最多的空间。它可以帮助你：

  • 找出“罪魁祸首”: 快速定位打包体积过大的模块。
  • 分析依赖关系: 了解模块之间的依赖关系，是否存在重复引用。
  • 优化打包策略: 根据分析结果，调整你的代码和 Webpack 配置，减少最终打包体积。

就像医生给你拍了个片子，能清楚地看到你身体内部的情况，然后才能对症下药。

二、安装和配置 Webpack Bundle Analyzer

首先，我们需要安装这个插件：

npm install --save-dev webpack-bundle-analyzer
# 或者
yarn add -D webpack-bundle-analyzer

安装好之后，我们需要修改 vue.config.js（或者你的 Webpack 配置文件）。如果没有这个文件，就需要在项目根目录下创建一个。

// vue.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({
        analyzerMode: 'server', // 启动展示打包报告的http服务器
        analyzerHost: '127.0.0.1', //  指定服务器主机名。
        analyzerPort: 8888, //  指定服务器端口。
        reportFilename: 'report.html', //  将在其中生成报告的路径和文件名
        defaultSizes: 'parsed', // 默认显示的文件大小，选项'stat', 'parsed', 'gzip'
        openAnalyzer: true, //  构建后自动打开报告
        generateStatsFile: false, // 是否生成stats.json文件
        statsOptions: null, // stats.json文件的配置项
        logLevel: 'info' // 日志级别。可以是verbose, info, silent, warn, error
      })
    ]
  }
};

配置项说明:

配置项 说明
analyzerMode 指定分析报告的显示方式。常用的选项有：server（启动一个本地服务器，在浏览器中显示报告）、static（生成一个静态 HTML 文件）、disabled（禁用分析器）。
analyzerHost 指定服务器主机名。默认值为 127.0.0.1。
analyzerPort 指定服务器端口。默认值为 8888。
reportFilename 指定生成的 HTML 报告文件的路径和文件名。默认值为 report.html。
defaultSizes 指定默认显示的文件大小。常用的选项有：stat（原始文件大小）、parsed（解析后的文件大小）、gzip（gzip 压缩后的文件大小）。通常我们关注 gzip 大小。
openAnalyzer 指定是否在构建完成后自动打开浏览器显示报告。
generateStatsFile 指定是否生成 stats.json 文件。这个文件包含了 Webpack 打包的详细信息，可以用于其他的分析工具。
statsOptions 配置 stats.json 文件的选项。具体配置请参考 Webpack 官方文档。
logLevel 指定日志级别。常用的选项有：verbose、info、silent、warn、error。

三、运行分析器

配置好之后，就可以运行你的 Vue 项目的构建命令了：

npm run build
# 或者
yarn build

如果 openAnalyzer 设置为 true，构建完成后，浏览器会自动打开一个页面，显示打包分析报告。如果没有自动打开，你可以手动访问 http://127.0.0.1:8888 (或者你设置的 analyzerHost 和 analyzerPort)。

四、分析报告

打开的页面会显示一个交互式的树状图，每个矩形代表一个模块或文件。矩形的大小表示模块或文件的大小。颜色通常表示模块的类型 (例如，JavaScript, CSS, 字体等)。

你可以通过以下方式分析报告：

  • 查看模块大小: 将鼠标悬停在矩形上，可以查看模块的详细信息，包括模块的名称、大小 (原始大小、解析后大小、gzip 压缩后大小) 和依赖关系。
  • 深入分析: 点击矩形，可以展开或折叠模块，查看更深层次的依赖关系。
  • 查找“罪魁祸首”: 找到那些占用空间最大的模块，重点关注它们。

五、常见的优化策略

现在我们有了“体检报告”，就可以开始“治疗”了。以下是一些常见的优化策略：

  1. 使用 Tree Shaking

    Tree Shaking 是 Webpack 的一项优化技术，它可以移除项目中未使用的代码 (dead code)。Vue CLI 默认启用了 Tree Shaking。

    • 确保使用 ES Modules: Tree Shaking 只能对 ES Modules (使用 import 和 export 语法) 生效。如果你的项目中使用了 CommonJS 模块 (使用 require 语法)，需要将其转换为 ES Modules。

    • 副作用 (Side Effects): 有些模块可能包含副作用，即使没有直接使用，也需要保留。例如，一些 CSS 框架可能会在全局范围内修改样式。你需要在 package.json 文件中配置 sideEffects 属性，告诉 Webpack 哪些文件或模块包含副作用。

      // package.json
{
  "name": "my-vue-project",
  "version": "1.0.0",
  "sideEffects": [
    "./src/assets/css/global.css" // 包含副作用的 CSS 文件
  ]
}

      如果你的项目没有任何副作用，可以将 sideEffects 设置为 false：

      // package.json
{
  "name": "my-vue-project",
  "version": "1.0.0",
  "sideEffects": false
}

  2. 代码分割 (Code Splitting)

    将你的代码分割成更小的块 (chunks)，按需加载。这样可以避免一次性加载所有代码，提高初始加载速度。

    • 路由懒加载: 对于单页应用，可以将不同的路由组件分割成独立的块，只有在访问该路由时才加载对应的组件。

      // router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue') // 路由懒加载
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') // 路由懒加载
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

      /* webpackChunkName: "home" */ 是一个魔法注释，用于指定代码块的名称。Webpack 会将 Home.vue 组件打包成一个名为 home.js 的独立文件。

    • 提取公共模块: 如果多个页面或组件使用了相同的模块，可以将这些模块提取成一个公共的块，避免重复加载。Vue CLI 默认会自动提取公共模块。

  3. 优化图片资源

    图片通常是导致打包体积过大的重要原因之一。

    • 使用合适的图片格式: 根据图片的特点选择合适的格式。例如，对于颜色较少的图片，可以使用 PNG-8 格式；对于颜色丰富的图片，可以使用 JPEG 格式；对于需要透明度的图片，可以使用 PNG-24 格式或 WebP 格式。WebP 格式通常比 JPEG 和 PNG 格式更小，而且支持无损和有损压缩。

    • 压缩图片: 使用图片压缩工具 (例如 TinyPNG、ImageOptim) 压缩图片，减小文件大小。

    • 使用 CDN: 将图片资源放在 CDN 上，利用 CDN 的缓存和加速功能，提高加载速度。

    • 使用 vue-lazyload 或 IntersectionObserver API 实现图片懒加载: 只在图片进入视口时才加载，避免一次性加载所有图片。

      npm install vue-lazyload --save
      // main.js
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: '1.3',
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
      <template>
  <img v-lazy="imageURL">
</template>

  4. 使用 Gzip 或 Brotli 压缩

    在服务器端启用 Gzip 或 Brotli 压缩，可以显著减小传输文件的大小。大多数 Web 服务器 (例如 Nginx、Apache) 都支持 Gzip 压缩。Brotli 是一种更先进的压缩算法，通常比 Gzip 压缩效果更好。

    • Gzip: 大多数浏览器都支持 Gzip 压缩。你需要在 Web 服务器上配置 Gzip 压缩。

    • Brotli: 一些较新的浏览器 (例如 Chrome、Firefox) 支持 Brotli 压缩。你需要在 Web 服务器上安装 Brotli 模块，并配置 Brotli 压缩。

    • Webpack 插件: 可以使用 compression-webpack-plugin 插件在构建过程中生成 Gzip 或 Brotli 压缩文件。

      npm install --save-dev compression-webpack-plugin
      // vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /.(js|css|html|svg)$/,
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false
      })
    ]
  }
};

  5. 升级依赖库

    定期检查并升级你的依赖库，使用最新版本。新版本通常会包含性能优化和 Bug 修复。

  6. 移除无用的代码和依赖

    检查你的代码，移除不再使用的代码和依赖。可以使用工具 (例如 eslint、prettier) 来帮助你发现和移除无用的代码。

  7. 使用 CDN 加速静态资源
    对于一些大的第三方库，如vue、react、element-ui等，可以使用CDN加速，减少打包体积。

    • 修改vue.config.js
    // vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    }
  }
}
    • 在index.html中引入CDN资源
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My App</title>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <!-- 引入 Vue Router -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>
    <!-- 引入 Element UI -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
</html>

  8. 开启生产环境的 Source Map
    在生产环境中，Source Map 并不是必须的，可以关闭Source Map来减少打包体积。

    // vue.config.js
module.exports = {
  productionSourceMap: false
}

六、注意事项

  • 持续监控: 定期使用 Webpack Bundle Analyzer 分析你的项目，监控打包体积的变化，及时发现和解决问题。
  • 不要过度优化: 优化是一个权衡的过程。不要为了追求极致的性能而牺牲代码的可读性和可维护性。
  • 测试: 在进行任何优化之前，务必进行充分的测试，确保优化不会引入新的 Bug。

七、总结

Webpack Bundle Analyzer 是一个强大的工具，可以帮助你分析 Vue 项目的打包体积，并进行优化。通过使用 Tree Shaking、代码分割、优化图片资源、使用 Gzip 压缩等策略，你可以显著减小你的项目打包体积，提高页面加载速度，提升用户体验。

希望今天的分享对大家有所帮助！ 拜拜！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注