vue-cli2.0-打包优化

这三个可以大量缩短打包时间
效率很好
基本可以缩短不止一倍

一. HappyPack

缩短不止一倍

文件 webpack.base.conf.js

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


 plugins: [
    
    new HappyPack({
      id: 'aaaaaaaaabbbbbbbccccc',
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true'
      }],
      threadPool: happyThreadPool,
      verbose: true
    })
  ],
  module: {
   rule: [{
        test: /\.js$/,
        loader: 'happypack/loader?id=aaaaaaaaabbbbbbbccccc',
   }]
  }

二. autodll-webpack-plugin

git: https://github.com/asfktz/aut...

npm run build --report
可以看到每个文件打包占比图
可以将其中较大的第三方库配置到dll中
减小打包后的文件 速度也会快很多

文件 webpack.base.conf.js

plugins: [
    
    new HtmlWebpackPlugin({
      inject: true,
      template: 'index.html' // 模版文件
    }),
    new AutoDllPlugin({
      path: '/static/js/',  //自己配
      inject: true, // 与 html-webpack-plugin 结合使用，注入html中
      filename: '[name].js',
      entry: {
        vendor: [
          'iview',
          'vue-echarts',
          'jquery',
          'vue',
          'codemirror',
          'lodash',
          
        ]
      }
    })
  ],

三. webpack-parallel-uglify-plugin

文件 webpack.prod.conf.js

// good

new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS:{
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),
    
替换 
 
// bad  
new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false,
      },     
      compress: {
        drop_console: true,
        pure_funcs: ['console.log'], 
        //移除console
        warnings: false
      },
      cache: true,
      parallel: true,
      sourceMap: true
    }),
    

四. 压缩图片
image-webpack-loader
可以缩小一丢丢