webpack构建速度优化

npm i -D webpack-bundle-analyzer
npm i -D os
npm i -D happypack
npm i -D webpack-parallel-uglify-plugin

webpack.base.conf.js中

const webpack = require("webpack")
const HappyPack = require('happypack'); // 【1205修改】
const os = require('os');// 【1205修改】
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });// 【1205修改】
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins:[
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('../static/js/vendor.manifest.json'),
      name: 'vendor'
    }),
    // 【1205修改】
    new HappyPack({
      //用id来标识 happypack处理那里类文件
      id: 'happyBabel',
      //如何处理  用法和loader 的配置一样
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
      }],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
    }),
    // 【1205修改】
    new HappyPack({
      id: 'vue',
      cache: false,
      threadPool: happyThreadPool,
      loaders: [
        {
          loader: 'vue-loader',
          options: vueLoaderConfig
// vueLoaderConfig来自 var vueLoaderConfig = require('./vue-loader.conf')
        }
      ]
    }),
    new BundleAnalyzerPlugin()
  ],
resolve: {
  extensions: ['.vue', '.js', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.min.js', // 【1205修改】 vue的别名 (如：import Vue from 'vue' ) 对庞大的第三方模块设置resolve.alias, 使webpack直接使用库的min文件，避免库内解析
    'vue-router$': 'vue-router/dist/vue-router.min.js',// 【1205修改】
    '@': resolve('src'), // src的别名
  },
  modules: [path.resolve(__dirname, "src"), "./node_modules"], // 【1205修改】 node_modules的引入路径
},
module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'happypack/loader?id=vue', // 【1205修改】
      include: [resolve('src')],
      exclude: path.resolve(__dirname,' ./node_modules')
    },
    {
      test: /\.js$/,
      loader: 'happypack/loader?id=happyBabel',// 【1205修改】
      include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
      exclude: path.resolve(__dirname,' ./node_modules')
    },
]
}
}

```javascript
在这里插入代码片

build目录下增加 webpack_dll.config.js

const path = require('path');
const webpack = require('webpack');
const DllPlugin = require('webpack/lib/DllPlugin');
module.exports = {

  entry: {
    vendor: ['vue', 'vue-router','vuex']
  },
  resolve: {
    alias: {
      'vue': path.resolve(__dirname, '../node_modules/vue/dist/vue.min.js'),
      'vue-router': path.resolve(__dirname, '../node_modules/vue-router/dist/vue-router.min.js'),
      'vuex': path.resolve(__dirname, '../node_modules/vuex/dist/vuex.min.js')
    }
  },
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: '[name].js',
    library: '[name]'
  },
  devtool: 'inline-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new DllPlugin({
      filename: '[name].js',
      name: '[name]',
      path: path.resolve(__dirname, '../static/js', '[name].manifest.json'), //描述生成的manifest文件
    }),
    new webpack
      .optimize
      .UglifyJsPlugin({
        compress: {
          warnings: false, //删除无用代码时不输出警告
          drop_console: true, //删除所有console语句，可以兼容IE
          collapse_vars: true, //内嵌已定义但只使用一次的变量
          reduce_vars: true, //提取使用多次但没定义的静态值到变量
        },
        output: {
          beautify: false, //最紧凑的输出，不保留空格和制表符
          comments: false, //删除所有注释
        }
      })
  ]
}

在这里插入代码片

项目的根目录下的index.html增加

在package.json中增加"dll": “node_modules/.bin/webpack --config build/webpack_dll.config.js”
然后npm run dll

webpack.prod.conf.js增加

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin') // 【1205修改】

plugins:[
new ParallelUglifyPlugin({
  // 传递给 UglifyJS的参数如下：
  uglifyJS: {
    output: {
      /*
       是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
       可以设置为false
      */
      beautify: false,
      /*
       是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
      */
      comments: false
    },
    compress: {
      /*
       是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
       不大的警告
      */
      warnings: false,

      /*
       是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
      */
      drop_console: true,

      /*
       是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
       转换，为了达到更好的压缩效果，可以设置为false
      */
      collapse_vars: true,

      /*
       是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成
       var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
      */
      reduce_vars: true
    }
  },
  test: /.js$/g,
  include: [],
  exclude: [],
  cacheDir: '.cache/',
  workerCount: '',
  sourceMap: false
}),]

webpack.dev.conf.js增加

devServer: {
    useLocalIp: true,
watchOptions: {
  poll: config.dev.poll,
  ignored: /node_modules/,
  aggregateTimeout: 300  // 【1205修改】文件变动后多久发起构建，避免文件更新太快而造成的频繁编译以至卡死，越大越好
}

config/index.js修改 poll: 1

然后npm run dev —npm run build