webpack 打包加速实战

module.exports = {
  plugins: [
  new webpack.optimize.ModuleConcatenationPlugin()
  ]
}

import * as helpers from 'helpers'
import * as helpers2 from 'helpers/string'
import * as helpers3 from 'helpers/...'
import * as helpers4 from 'helpers/...'

// register global utility filters.
let _filters = Object.assign(helpers, helpers2, helpers3, helpers4)
Object.keys(_filters).forEach(key => Vue.filter(key, _filters[key]))

// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks(module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
}),

{
  "scripts": {
    ...
    "build": "rimraf dist && npm run dll && npm run build:server && npm run build:client"
    ...
    "dll": "cross-env NODE_ENV=dll node build",
    ...
  }
}

const webpack = require('webpack')
const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const os = require('os')

const vendors = [
  'babel-polyfill',
  'es6-promise',
  'vue/dist/vue.esm.js',
  'vue-router',
  'vuex',
  'vuex-router-sync',
  'axios',
  'cookie'
]

module.exports = {
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].dll.js',
    library: '[name]_[hash]'
  },
  entry: {
    'vendor': vendors,
  },
  plugins: [
    new UglifyJsPlugin({
      ... // 压缩参数略
    }),
    new webpack.DllPlugin({
      context: __dirname,
      path: path.join(__dirname, '../dist', '[name]-manifest.json'),
      name: '[name]_[hash]',
    })
  ]
}

// 这里将生成的 vendor.dll.js 文件 copy 到 你需要的目录 
new CopyWebpackPlugin([{
  from: 'dist/vendor.dll.js',
  to: config.build.assetsSubDirectory,
  flatten: true
}]),
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('../dist/vendor-manifest.json')
}),

...pkgs.reduce((pre, current) => {
  let res = [new HtmlWebpackPlugin(current.plugin)]
  let {assets, filename} = current.plugin || {}
  if (pre) res = [...pre, ...res]
  if (assets) {
    return [...res, new HtmlWebpackIncludeAssetsPlugin({
    files: [filename],
    assets: assets.map(item => `${assetsSubDirectory}/${item}`),
    append: false,
    publicPath: assetsPublicPath
    })]
  }
  return res
}, null),

const extChunks = IS_PROD ? ['manifest'] : []
const chunksSortMode = IS_PROD ? 'dependency' : 'auto'
const template = 'static/templates/index.pug'
const minfiy = {}

exports pkg = {
  'index': {
    buddle: 'server-index-bundle.js',
    entry: path.resolve(__dirname, '...省略路径../entry.js'),
    plugin: {
      filename: 'app/index.html',
      chunks: ['app', 'vendor', 'common', ...extChunks],
      inject: true,
      assets: ['vendor.dll.js'],
      chunksSortMode,
      template,
      minify
    }
  },
  // 如果没有额外的依赖 assets 不用传
 '404': {
    plugin: {
      filename: '404.html',
      chunks: ['exception'],
      inject: true,
      chunksSortMode,
      template: 'static/404.pug',
      minify
    }
  }
}

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'static': path.resolve(__dirname, '../static')
  	},
  	// 可以用引用 node_modules 里面的方法引用 src 下面的模块
  	modules: [path.resolve(__dirname, '../src'), "node_modules"]
  }
}

new UglifyJsParallelPlugin({
  uglifyOptions: {
    ecma: 8,
    mangle: true,
    output: {
      beautify: false
    },
    compress: {
      drop_console: true
    }
  },
  sourceMap: false,
  cache: true,
  parallel: os.cpus().length * 2,
  exclude: /.min.js$/
}),

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

module.exports = {
  module: {
    rules: [
      test: /.js$/,
      use: [
        {
          loader: 'cache-loader', // 使用 cache-loader 缓存
          options: {
          	cacheDirectory: resolve('node_modules/.cache')
          }
        },
        'happypack/loader?id=babel' // 将 babel loader替换为 happypack
      ],
      exclude: /node_modules/,
        include: [
          resolve('src'), resolve('test')
       ]
    ]
  },
  plugins: [
  	// 使用 happypack 插件
    new HappyPack({ 
	  id: 'babel',
	  threadPool: happyThreadPool,
	  verbose: false,
      loaders: [{
        loader: `babel-loader`
      }]
    })
  ]
}

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
module.exports = {
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

let projects = process.argv.slice(2)
if (!!projects && projects.length) {
  // filter your entry
}