Vue-cli3.0 与 Webpack4.0 集成，使用 webpack-bundle-analyzer 分析打包后的依赖

在前端开发中，打包是一个非常重要的环节，打包后的代码质量和体积直接影响网站的性能和用户体验。Vue-cli3.0 是一个非常流行的 Vue.js 项目脚手架，它内置了 Webpack4.0 并提供了一些默认配置，使得我们可以快速搭建 Vue.js 项目。但是，我们往往需要对打包后的代码进行分析，找出其中的问题并进行优化。这时候，webpack-bundle-analyzer 就是个好工具。本文将详细介绍如何使用 webpack-bundle-analyzer 分析打包后的依赖，并对其中的一些问题进行优化。

安装 webpack-bundle-analyzer

首先，我们需要安装 webpack-bundle-analyzer，可以通过 npm 安装：

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

配置 webpack-bundle-analyzer

在 Vue-cli3.0 中，Webpack4.0 的配置被隐藏在了 vue.config.js 中。我们可以在 vue.config.js 中进行配置，启用 webpack-bundle-analyzer。

// www.javascriptcn.com code example
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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

这样，当我们运行 npm run build 后，就会自动打开一个网页，展示打包后的依赖关系。

优化打包后的依赖

我们可以通过 webpack-bundle-analyzer 分析打包后的依赖，找出其中的问题并进行优化。下面是一些常见的问题和优化方法。

1. 重复引入

有时候我们会在多个文件中重复引入同一个模块，这会导致打包后的体积变大。我们可以使用 splitChunks 将重复引入的模块抽离出来，避免重复打包。

// www.javascriptcn.com code example
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

2. 按需加载

有些模块可能只在特定情况下才会使用，我们可以使用 Vue.js 的异步组件和 Webpack4.0 的 import() 方法实现按需加载，避免一次性加载所有模块。

import(/* webpackChunkName: "async-component" */ './AsyncComponent.vue')

3. Tree-shaking

Tree-shaking 是一个非常重要的优化技术，它可以剔除无用的代码，减少打包后的体积。我们可以通过配置 optimization 中的 usedExports 和 sideEffects 实现 Tree-shaking。

module.exports = {
  configureWebpack: {
    optimization: {
      usedExports: true,
      sideEffects: false
    }
  }
}

4. Gzip 压缩

Gzip 压缩可以进一步减少打包后的体积，提高网站的加载速度。我们可以使用 webpack 的 compression-webpack-plugin 插件实现 Gzip 压缩。

// www.javascriptcn.com code example
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

结语

本文介绍了如何使用 webpack-bundle-analyzer 分析打包后的依赖，并对其中的一些问题进行优化。通过这些优化，我们可以减少打包后的体积，提高网站的性能和用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d144f3a941bf71342ae40f