Vue-cli-service Build详解

一、安装并使用vue-cli-service build

Vue-cli-service build是一个基于webpack构建的命令行工具，用于将Vue应用程序编译为静态文件。使用它之前，需要安装Vue-cli。首先，使用npm安装Vue-cli:

npm install -g vue-cli

然后，在Vue项目所在目录下，执行以下命令即可使用Vue-cli-service build:

vue-cli-service build

执行完这个命令后，会在项目目录下自动生成一个dist目录，里面包含了编译后的所有文件。可以把这些文件直接发布到服务器上，以部署Vue应用程序。

二、Vue-cli-service build的配置选项

Vue-cli-service build支持一些配置选项，用于定制化编译过程。在使用Vue-cli-service build时，可以加上一些选项，来定制化编译过程，比如：

 vue-cli-service build --mode development

这个选项可以指定编译模式为开发模式。除此之外，还有很多配置选项可以使用，具体如下。

1. –mode

指定编译模式，可选值有development、production和test。

2. –dest

指定输出目录，默认为dist。

3. –modern

启用现代模式构建。现代模式构建会生成两个版本的文件，一个是ES6模块版本，另一个是传统版本。浏览器如果支持ES6模块，则会自动加载ES6版本，否则加载传统版本。

4. –target

指定编译目标，可选值有’app’和’lib’。app表示编译为应用程序，lib表示编译为库，供其他项目使用。

5. –formats

指定编译出的库的格式，可选值有’umd’、’cjs’、’amd’、’system’、’esm’和’iife’。

6. –name

指定生成的库的名称。

7. –no-clean

不执行清理操作。这个选项用于保留之前的生成的文件，以方便调试。

8. –watch

启用监听模式，即监听文件的变化，自动重新编译。用于开发模式下的编译。

三、Vue-cli-service build的webpack配置

Vue-cli-service build的底层是基于webpack的，因此，Vue-cli-service build也支持一些webpack的配置，以实现更加精细化的构建。Vue-cli-service build会自动生成一个webpack配置文件，默认在项目的根目录下生成一个vue.config.js文件。我们可以在这个文件中添加webpack的配置选项，来定制化编译过程。

module.exports = {
  chainWebpack: config => {
    // 添加新的svg loader
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.
      use('vue-svg-loader').
        loader('vue-svg-loader').
        options({
          svgo: {
            plugins: [],
            removeDoctype: true,
            removeComments: true
          }
        });
  }
};

上面的代码演示了添加一个新的svg loader的webpack配置，这个loader将会把SVG图像转换为Vue组件，以便在Vue模板中使用。

四、Vue-cli-service build的优化

Vue-cli-service build不仅支持配置选项和webpack配置，还支持一些优化选项，以提高构建的效率和文件的大小。

1. 压缩代码

可以使用UglifyJSPlugin来压缩代码：

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

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

2. 提取公共代码

可以使用SplitChunksPlugin来提取公共代码，减少文件的大小：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

3. 去除无用CSS

可以使用PurifyCSSPlugin来去除无用的CSS：

const PurifyCSSPlugin = require('purifycss-webpack');
const glob = require('glob-all');

module.exports = {
  configureWebpack: {
    plugins: [
      new PurifyCSSPlugin({
        paths: glob.sync([
          // 需要进行CSS tree shaking的文件
          path.join(__dirname, './src/*.vue')
        ])
      })
    ]
  }
}

4. 图片压缩

可以使用imagemin-webpack-plugin来压缩图片：

const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i,
        cacheFolder: path.resolve(__dirname, 'cache'),
        optimizeCache: true,
        pngquant: {
          quality: '95-100'
        },
        svgo: null,
        plugins: [
          imageminMozjpeg({
            quality: 80,
            progressive: true
          })
        ]
      })
    ]
  }
}

5. 启用gzip压缩

可以使用CompressionWebpackPlugin来启用gzip压缩：

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip'
      })
    ]
  }
}

如果需要压缩更多的文件类型，可以增加一个数组，比如：

new CompressionWebpackPlugin({
  filename: '[path].gz',
  algorithm: 'gzip',
  test: /\.(js|css|html|svg)$/,
  threshold: 10240,
  minRatio: 0.8,
  deleteOriginalAssets: false
})

五、Vue-cli-service build的性能优化

除了上面的优化选项之外，还有一些性能优化需要注意。

1. 避免在模板中使用无法缓存的表达式

一些表达式，比如Math.random()，会导致模板的结果无法缓存，因此需要避免在模板中使用这些表达式。

2. 使用懒加载

对于一些大型的组件或者页面，可以使用Vue的异步组件和路由懒加载来提高加载速度，减少初始下载大小：

const Login = () => import('./views/Login.vue');
const Home = () => import('./views/Home.vue');
const User = () => import('./views/User.vue');

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/',
      component: Home
    },
    {
      path: '/user/:id',
      component: User
    }
  ]
});

3. 图片处理

为了减少加载时间和提高性能，可以对图片进行处理。比如，可以压缩图片、减少图片的分辨率等等。可以使用一些自动化的工具，比如ImageOptim和TinyPNG。

4. 避免使用不必要的插件和库

有些插件和库可能会对性能造成影响，因此在使用它们时需要谨慎。千万不要使用不必要的插件和库。

5. 充分利用缓存

利用浏览器缓存可以提高加载速度，减少带宽消耗。因此，在开发时需要充分利用缓存，比如通过设置Expires和Cache-Control响应头等。

六、总结

本文详细介绍了Vue-cli-service build的使用、配置选项、webpack配置、优化选项以及性能优化。通过本文的介绍，读者可以理解和掌握Vue-cli-service build的使用和相关知识，进一步提高Vue应用程序的构建效率和性能。