webpack - 打包速度优化

方法一:
区分第三方代码(vender)和业务代码(app)
DllPlugin DllReferencePlugin 这两个插件设置打包好的第三方代码不再打包
第一步: 在build文件中新建一个webpack.dll.config.js
第二部: 配置webpack.dll.config.js

 const path = require('path');
 const webpack = require('webpakc')
 module.exports = {
  entry:{
    vue:['vue','vue-router'],
    ui:['element-ui']
  },
  output:{
    path:path.join(__dirname,'../src/dll/'), //新建一个目录，存放dll文件
    filename:'[name].dll.js',
    library:'[name]', // 怎么引用打包好的第三方库
  },
  plugins:[
    new webpack.DllPlugin({
      path: path.join(__dirname,'../src/dll/','[name]-manifest.json'), // 打包后的dll文件放在位置及名称
      name:'[name]'
    }),
    // 混淆压缩
    new webpack.optimize.UglifyJsPlugin()

  ]
}

第三步: 命令行打包: webpack –config build/webpack.dll.config.js
第四部: 在webpack.prod.conf.js中加入如下代码:

plugin:[
    new webpack.DllReferencePlugin({
        manifest: require('../src/dll/ui-manifest.json')
    }),
    new webpack.DllReferencePlugin({
        manifest: require('../src/dll/vue-manifest.json')
    })
    ....
]

方法二: 并行进行代码压缩混淆
插件: UglifyJsPlugin 压缩混淆代码
设置:paraller cache

// 修改webpack.prod.conf.js
plugins:[
    new UglifyJsPlugin({
            uglifyOptions:{
                compress:{
                warnings: false,
                }
            },
            sourceMap: false,
            parallel: true , // 并行处理打包文件
            cache: true, // 使用缓存
    })
]

方法三:
happyPack 将串行变为并行
happyPack.TheadPool 线程池
安装 : npm install happypack –save-dev

// 修改webpack.prod.conf
const HappyPack = require('happypack')

 plugins:[
  new HappyPack({
    id:'vue',
    loaders:[
      {
        loader:'vue-loader',
        option:require('./vue-loader.conf')
      }
    ]
  })

//修改webpack.base.conf.js
{
    test: /\.vue$/,
    loader: 'happypack/loader?id=vue',
    options: vueLoaderConfig
  },

四: babel-loader
开启缓存: options.cacheDirectory
include/exclude: 规定打包的范围

//修改webpack.base.conf.js
{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

},
// 修改include   减少babel-loader的处理范围
include: [resolve('src')]

 //resolve('test'), 开发环境使用
 //resolve('node_modules/webpack-dev-server/client') 开发环境使用

其他因素:
减少resolve
DevTool:去除sourcemap
cache-loader, // 将loader处理结果缓存下来
升级node,
升级webpack,