Vue.js 中使用 Webpack 打包优化，提高页面加载速度-JavaScript中文网-JavaScript教程资源分享门户

前言

Vue.js 是一个流行的前端框架，广泛应用于单页面应用程序和响应式 Web 开发。而 Webpack 是一个模块打包器，被广泛使用来构建多页面应用和单页面应用。在使用 Vue.js 进行开发的过程中，我们常常需要使用 Webpack 进行打包，并且想要减少应用程序的加载时间。本篇文章将会介绍如何利用 Webpack 对 Vue.js 应用程序进行打包优化，进一步提高应用程序的性能。

Webpack 的优化

在进行前端页面的构建过程中，Webpack 对性能的优化非常重要。下面，将介绍 Webpack 在打包优化方面的使用。

1. 持久化缓存

使用 Webpack 的缓存可以让首次编译完后，后续的编译时间大大缩短，特别是对于大型的 Web 项目。Web 端口还有一个叫做 SW-CacheStorage，支持离线缓存和增量更新，通过使用该缓存，可以使您的应用更加高效地运行。

module.exports = {
  cache: {
    type: 'filesystem', // cache type
    cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack'), // directory for caching
    name: 'my-cache', // cache name
  },
};

2. Tree Shaking

Tree Shaking 是一种工具，可用于删除未使用的代码块。这项技术被广泛应用于 JavaScript 模块中，并且在 Webpack 中都能够进行优化，从而减小打包出来的体积大小，提高页面的加载速度。

module.exports = {
  optimization: {
    minimize: true, // minimize js
    usedExports: true, // code elimination
  },
};

3. 代码分割

Vue.js 中的代码通常会被分为多个代码块，通过使用 Webpack 插件，可以使所有的代码块都被正确地切分。将应用程序代码切分成多个代码块，可以使浏览器以并行方式加载这些代码块，并且按需加载。对于 Webpack5 版本，已经默认开启了这项优化。

// javascriptcn.com 代码示例
module.exports = {
  output: {
    filename: '[name].[contenthash].js', // 各个块的名称，自动补充hash
  },
  optimization: {
    splitChunks: {
      chunks: 'all', // 将所有块一起进行优化
      minSize: 0, // 起手式
      name: false, // 将自动生成的块名替换成块字段（例如vendors）
    },
  },
};

4. 压缩输出

在 Webpack 打包 Vue.js 应用程序时，压缩输出代码也是一个非常重要的优化策略。通过缩减代码的体积和压缩输出代码，可以大大减少应用程序的加载时间。

// javascriptcn.com 代码示例
module.exports = {
  optimization: {
    minimize: true, // 压缩
    minimizer: [
      new TerserPlugin(), // Js压缩插件
      new OptimizeCSSAssetsPlugin(), // CSS压缩插件
    ],
  },
};

Vue.js 中的 Webpack 配置

在 Vue.js 中，我们需要在 vue.config.js 中配置 Webpack。下面，我们将介绍如何使用 vue.config.js 进行 Webpack 的优化。

// javascriptcn.com 代码示例
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin(),
    ],
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: 'vendors.[contenthash].js',
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          filename: 'common.[contenthash].js',
        },
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['.js', '.vue', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          esModule: false,
          limit: 4096,
          fallback: {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]',
            },
          },
        },
      },
    ],
  },
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack'),
    name: 'my-cache',
  },
};

总结

在本篇文章中，我们介绍了如何使用 Webpack 对 Vue.js 应用程序进行打包优化，进一步提高应用程序的性能。通过使用持久化缓存、Tree Shaking、代码分割和压缩输出等 Webpack 技术，可以使应用程序更加高效地运行。如果您要开发一个性能出色的 Vue.js 应用程序，这些优化技术就是必须要掌握的。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658551fed2f5e1655dffa266