vue-cli2 构建速度优化的实现方法

针对“vue-cli2 构建速度优化的实现方法”的完整攻略，我可以为你提供以下几个步骤：

1. 使用线程池

在项目目录下的build/webpack.base.conf.js文件中，我们可以使用thread-loader来开启线程池，将耗时的操作放置在子进程中进行提高构建速度。

// ...
const threadLoader = require('thread-loader');

threadLoader.warmup({
  // the number of CPUs/cores you want to allocate for your child processes
  // 默认情况下将使用 CPU 的数量
  workers: require('os').cpus().length - 1,
  // how long the idle timeout is for workers
  // 闲置多久后关闭子进程
  // 默认是 500ms
  workerTimout: 5000,
});

module.exports = {
  // ...
  module: {
      rules: [
          {
            test: /\.js$/,
            loader: [
              'thread-loader',
              'babel-loader',
            ],
            // 可选配置项
            options: {
              // 活着的 worker 的数量
              // 默认是 (os.cpus().length - 1)
              workers: 2,
            },
          },
      ],
  },
};

使用线程池可以大幅提升构建速度，特别是在处理较大的代码库时。

2. 使用 DLLPlugin

Vue Cli 2 默认生成的项目中已经使用了 commons chunk 来提取公共模块，然而在构建应用的过程中，每次重新构建都需要重新构建一次 vendorjs，因此我们可以使用 DLLPlugin 抽取第三方模块，将它们打成静态资源文件避免每次构建都重复打包。

2.1 安装依赖

在项目目录下运行以下命令安装所需的依赖：

yarn add -D webpack@^3.0.0 webpack-dev-server@^3.0.0 webpack-merge@^4.0.0 dll-webpack-plugin@^1.0.0 uglifyjs-webpack-plugin@^2.0.0

2.2 添加配置文件

在项目根目录下添加如下配置文件：

// webpack.dll.conf.js
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const config = {
  entry: {
    vendor: [
      'vue',
      'vue-router',
      'vuex',
    ],
  },
  output: {
    path: path.join(__dirname, './src/dll'),
    library: '[name]_[hash]',
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, './src/dll', '[name]-manifest.json'),
      name: '[name]_[hash]',
    }),
    // 打包后再进行一次压缩
    new UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,
        // 忽略 console.log
        drop_console: true,
      },
    }),
  ],
};
module.exports = config;

2.3 添加 Npm Script

在package.json文件中添加以下脚本：

{
  // ...
  "scripts": {
    // ...
    "build:dll": "webpack --config build/webpack.dll.conf.js",
  }
}

2.4 构建 DLL

执行以下命令，构建 DLL：

yarn build:dll

执行完成后，生成的 dll 目录下将包含 vendor.dll.js 和 vendor-manifest.json 两个文件。

2.5 修改 build/webpack.prod.conf.js

在build/webpack.prod.conf.js文件中添加以下配置：

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.conf');
// 指向 vendor.manifest.json 文件
const manifest = require('../src/dll/vendor-manifest.json');

module.exports = merge(webpackBaseConfig, {
  mode: 'production',
  devtool: false,
  output: {
      publicPath: './',
      filename: utils.assetsPath('js/[name].[chunkhash].js'),
      chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
  },
  optimization: {
      splitChunks: {
          chunks: "all",
          cacheGroups: {
              vendor: {
                  // 指向 vendor.manifest.json 文件
                  test: /node_modules\/(vue|vue-router|vuex)\//,
                  name: 'vendor',
                  enforce: true,
              },
          },
      },
      runtimeChunk: true,
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest,
    }),
  ],
});

这样在生产打包时，就不用每次都打包第三方库了。

上述两个方法在 Vue 2.x 项目中都有很大的帮助，可以较大程度地提升构建速度，特别在项目庞大且开发者较多的情况下，更是如此。