Vue-CLI webpack2项目打包优化分享

引言

作为Vue.js的开发者，我们在构建Vue.js项目的时候，尤其是当你的项目变得越来越庞大时，打包的时间会变得越来越慢。这不仅拖慢了我们开发的频率，也降低了我们的开发效率。在这里，我们将从webpack2的角度来分享优化Vue.js打包的一些技巧和经验。

优化打包时间

1. 使用 HappyPack

HappyPack是一个使Webpack在使用Loader时更快的插件，它通过多线程解析代码，加速编译速度。通过它，可以使打包时间大大缩短，特别适合大型项目的打包优化。

npm install --save-dev happypack

// webpack.config.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js',
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: 'happypack/loader?id=vue',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: ['babel-loader?cacheDirectory']
    }),
    new HappyPack({
      id: 'vue',
      threadPool: happyThreadPool,
      loaders: ['vue-loader']
    })
  ]
}

2. 使用DllPlugin

DllPlugin是webpack内置的插件，用于把通用的依赖文件提出来单独打包，减少其他模块的编译时间。由于vendor是我们最常用的依赖，使用DllPlugin将会进一步减小我们用于构建的vendor文件的体积，使我们的构建时间更快。

安装DllPlugin：

npm install --save-dev webpack-dll-plugin

创建webpack.dll.conf.js配置文件：

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    vendor: [
      'vue',
      'vue-router',
      'vuex',
      'lodash'
    ]
  },
  output: {
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '[name]-manifest.json'),
      name: '[name]_library',
      context: __dirname
    })
  ]
}

在webpack.base.conf.js中引入DllReferencePlugin：

// webpack.base.conf.js
const webpack = require('webpack')
//...

module.exports = {
  //...
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    })
  ]
}

在打包构建vendor文件的时候，可以使用如下命令：

npm run build:dll

优化打包质量

1. 代码规范

为了保证我们代码的可读性和维护性，我们应该使用ESLint来保持代码规范性。在这里推荐一种基于eslint-config-airbnb和eslint-plugin-vue的语法校验方案。

npm install --save-dev eslint eslint-config-airbnb eslint-plugin-vue eslint-loader

// .eslintrc.js
module.exports = {
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  extends: 'airbnb',
  env: {
    browser: true,
    es6: true
  },
  plugins: [
    'vue'
  ],
  rules: {
    'no-param-reassign': [2, { 'props': false }],
    'no-shadow': 0,
    'no-console': [2, { allow: ['warn', 'error'] }],
    'no-return-assign': 0,
    'no-underscore-dangle': 0,
    'consistent-return': 0,
    'import/first': 0,
    'import/no-unresolved': 0,
    'import/prefer-default-export': 0,
    'import/extensions': 0,
    'import/no-extraneous-dependencies': 0,
    'vue/jsx-uses-vars': 2,
    'vue/max-attributes-per-line': [2, {
      'singleline': 10,
      'multiline': {
        'max': 1,
        'allowFirstLine': false
      }
    }],
    'vue/prop-name-casing': [2, 'camelCase'],
    'vue/name-property-casing': [2, 'PascalCase'],
    'vue/html-self-closing': [2, {
      'html': {
        'void': 'never',
        'normal': 'never',
        'component': 'always'
      },
      'svg': 'always',
      'math': 'always'
    }]
  }
}

2. 按需加载

在Vue.js中，我们可以使用异步组件来实现按需加载，这样可以在路由控制的时候，只加载需要的组件。使用异步组件可以减少app浏览器的加载时间，提高页面的渲染速度。

使用require.ensure()方法按需加载：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: resolve => require.ensure([], () => resolve(require('@/components/Home')), 'Home')
    },
    {
      path: '/about',
      name: 'About',
      component: resolve => require.ensure([], () => resolve(require('@/components/About')), 'About')
    }
  ]
})

在这个例子中，我们只在需要这个组件的时候才会动态加载。require.ensure()有三个参数，第一个参数为依赖数组，第二个参数是返回的模块，第三个参数是chunk name（加载器的名称）。

结论

在以上分享中，我们提供了两种常见的优化方式：HappyPack和DllPlugin用于优化打包时间，ESLint和按需加载用于优化打包质量。虽然这些优化策略并不是常规的优化方式，但在面对大型的Vue.js项目时，这些优化方法是帮助我们优化项目构建的更快和准确的方式之一。