Vue-cli3 脚手架搭建 & 结合插件实现资源优化

用 Vue-cli3 构建快速高效的 Vue3 应用：资源优化进阶指南

Vue-cli3 脚手架搭建

踏上 Vue3 开发之旅的第一步是安装 Vue-cli3 脚手架。只需运行以下命令即可：

npm install -g @vue/cli

安装完成后，使用 vue create <project-name> 命令创建一个新的 Vue3 项目，其中 <project-name> 是你项目的名称。

使用 compression-webpack-plugin 开启 Gzip 压缩

Gzip 压缩是一种强大的技术，可以大幅减小 HTTP 请求的大小。compression-webpack-plugin 让你轻松在 Vue3 项目中启用 Gzip 压缩。

npm install compression-webpack-plugin --save-dev

在 webpack 配置文件中添加以下配置：

const CompressionPlugin = require('compression-webpack-plugin');

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

使用 image-webpack-loader 实现图片压缩

image-webpack-loader 是一个强大工具，可自动优化图片，减小其大小。

npm install image-webpack-loader --save-dev

在 webpack 配置文件中添加以下配置：

const imageWebpackLoader = require('image-webpack-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

使用 uglifyjs-webpack-plugin 实现 JavaScript 代码压缩

uglifyjs-webpack-plugin 可对 JavaScript 代码进行压缩，移除不必要的字符和空格，减小其大小。

npm install uglifyjs-webpack-plugin --save-dev

在 webpack 配置文件中添加以下配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            drop_console: true
          }
        }
      })
    ]
  }
};

总结

通过使用这些插件，你可以显著优化 Vue3 应用的资源，缩小大小，提高加载速度。请注意，优化设置可能会根据具体项目的需求而有所不同。

常见问题解答

• 使用 Gzip 压缩后，我的网站速度没有明显改善。怎么办？
  • 检查服务器是否正确配置为提供 Gzip 压缩响应。
• image-webpack-loader 似乎没有压缩我的图片。
  • 确保你已正确安装并配置了该插件。检查 webpack 配置中 test 属性是否匹配你的图片文件类型。
• uglifyjs-webpack-plugin 导致我的代码出错。
  • 尝试调整 uglifyOptions 设置，禁用某些压缩选项。
• 如何优化其他资源类型，例如字体和音频文件？
  • 有许多其他插件可用于优化不同类型的资源。研究并选择适合你的项目需求的插件。
• 资源优化会影响应用程序的性能吗？
  • 如果优化不当，资源优化可能会对性能产生负面影响。在实施优化时，请确保彻底测试应用程序。