36 Vue.js 应用构建与打包优化

1. 应用构建基础

1.1 创建 Vue.js 项目

使用 Vue CLI 创建项目是开始构建 Vue.js 应用的第一步。执行以下命令来安装 Vue CLI：

npm install -g @vue/cli

创建新的 Vue 项目：

vue create my-project

根据提示选择预设或手动选择功能。

1.2 项目结构简介

创建项目后，你会看到如下的项目结构：

my-project/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
└── vue.config.js

• src/: 存放源码的目录。
• public/: 存放静态文件，如 index.html。
• main.js: 入口文件。
• App.vue: 主应用组件。

2. 打包应用

2.1 打包命令

在准备上线之前，你需要将应用打包。执行以下命令：

npm run build

执行后会在 dist/ 目录下生成生产环境可用的文件。

2.2 打包后的文件结构

经过打包后，dist/ 目录下的结构通常如下：

dist/
├── css/
│   └── app.[hash].css
├── js/
│   └── app.[hash].js
└── index.html

• css/: 存放样式文件。
• js/: 存放 JavaScript 文件。
• index.html: 入口 HTML 文件。

3. 打包优化

3.1 代码分割

为了提高应用的性能，可以使用 Webpack 的代码分割功能。可以在 vue.config.js 中进行配置：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all', // 优化所有类型的代码
      }
    }
  }
}

3.2 懒加载组件

懒加载可以显著减少初始加载时间。使用 Vue Router 的懒加载功能：

const Foo = () => import(/* webpackChunkName: "foo" */ './components/Foo.vue');

3.3 提取公共代码

使用 webpack 的 optimization 配置提取公共代码。例如：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            name: 'vendor',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all',
            priority: -10,
          },
        },
      },
    },
  },
}

3.4 压缩和优化资源

使用 TerserWebpackPlugin 和 css-minimizer-webpack-plugin 进行 JavaScript 和 CSS 的压缩：

npm install terser-webpack-plugin css-minimizer-webpack-plugin --save-dev

并在 vue.config.js 中添加如下配置：

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin(),
        new CssMinimizerPlugin(),
      ],
    },
  },
}

3.5 使用 PWA 至少缓存静态资源

如果你想让你的应用更具用户友好性，可以考虑使用 PWA 插件：

vue add pwa

这将会自动为你生成 registerServiceWorker.js 和必要的配置，使你的应用可以离线工作。

4. 总结

在构建和优化 Vue.js 应用的过程中，你需要考虑的要点包括：

• 使用 Vue CLI 快速创建项目。
• 确保正确的打包命令和输出文件结构。
• 应用代码分割、懒加载和提取公共代码来优化性能。
• 压缩 JavaScript 和 CSS 资源以减少文件大小。
• 考虑使用 PWA 特性提高用户体验。

通过上述方法，你可以有效地构建和优化你的 Vue.js 应用，提高加载速度和用户体验。