详解vue-cli之webpack3构建全面提速优化

标题

详解vue-cli之webpack3构建全面提速优化

简介

Vue-cli是Vue框架官方提供的脚手架工具，能够帮助我们快速搭建项目，减少开发成本。而webpack则是目前比较流行的打包工具。本攻略将介绍如何在Vue-cli中使用webpack3构建项目，并进行全面提速优化。

步骤

1. 安装vue-cli

首先，我们需要安装Vue-cli。在命令行中输入以下命令：

npm install -g vue-cli

2. 创建Vue项目

创建Vue项目很简单。在命令行中输入以下命令：

vue init webpack myproject

其中，myproject是项目名称，可以根据自己的需要进行修改。

3. 运行项目

创建好项目后，我们就可以运行项目了。在命令行中进入到项目目录下，输入以下命令：

npm run dev

然后在浏览器中打开 http://localhost:8080/ ，就可以看到项目的运行效果了。

4. 优化webpack配置文件

Vue-cli默认生成的webpack配置文件，性能并不是特别好。因此，我们需要进行一些优化。

4.1 使用CDN加速静态资源

使用CDN加速静态资源可以大大减轻服务器的负担，这对于大型项目来说尤为重要。

我们可以修改webpack.base.conf.js文件，将官方提供的CDN path替换成自己的CDN:

output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
  publicPath: 'https://cdn.example.com/' // 替换成你自己的CDN
},

4.2 使用DllPlugin插件

使用DllPlugin插件可以将第三方模块单独打包，减少构建时间。我们可以创建一个webpack.dll.conf.js文件，进行单独打包。

具体操作可以参考以下代码：

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

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

5. 结束语

使用以上方法，可以对Vue-cli项目进行全面的提速优化。当然，这还只是一个开始，我们可以根据项目需要，对webpack配置进行更加细致的优化。

示范代码

在第4节中，我们提到了如何进行webpack配置文件的优化。这里提供一个完整的webpack.base.conf.js的示范代码，供参考：

const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}