参考：

  • 开发：优化打包构建速度 - 开发体验和效率
  • 生产：优化产出代码 - 产品性能

    提高构建速度

    优化babel-loader

    配置缓存，es6代码没改的话，就不会重新编译。
    1. {
    2. test: /\.js$/,
    3. use: ['babel-loader?cacheDirectory'], // 开启缓存
    4. include: path.resolve(__dirname, 'src'), // 明确范围
    5. // exclude排除范围，二选一即可；一般排除node_modules
    6. // exclude: path.resolve(__dirname, 'node_modules')
    7. }

IgnorePlugin

noParse

happyPack

多进程打包

  • JS单线程，开启多进程打包
  • 提高构建速度（特别是多核CPU）
    1. const HappyPack = require('happypack')
    2. module.exports = {
    3.   module: {
    4.     rules: [
    5.     {
    6.         test: /\.js$/,
    7.       use: ['happypack/loader?id=babel'],
    8.       include: srcPath
    9.     }
    10.   ]
    11. },
    12. plugins: [
    13.   // 开启多进程打包
    14.     new HappyPack({
    15.     // 用唯一的标识符 id 来代表当前的HappyPack是用来处理一类特性的文件
    16.       id: 'babel',
    17.     // 如克处理.js，用法和 Loader 配置中一样
    18.     loaders: ['babel-loader?cacheDirectory']
    19.   })
    20. ]
    21. }

ParallelUglifyPlugin

开启多进程压缩JS

自动刷新

配置devServer自动刷新会自动带上，不需要额外配置

热更新

自动刷新带来的一些问题：

  • 整个网页全部刷新，速度较慢
  • 状态会丢失

热更新解决问题：新代码生效，网页不刷新，状态不丢失；配置如下（只需在dev.config里配置）：

  1. const webpack = require('webpack');
  2. module.exports = {
  3.     plugins: [
  4.       new webpack.HotModuleReplacementPlugin()
  5.   ],
  6.   devServer: {
  7.     // 打开热更新
  8.       hot: true
  9.   }
  10. }

需要注意的是：
只是这样配置，默认情况下只有修改css才会用到热更新，对于html和js文件是不支持的。
需要js文件支持热更新，需要在入口文件加入下面配置：

  1. if (module.hot) {
  2.   // 允许热更新的js文件，只监听math.js文件
  3.     module.hot.accept(['./math.js'], () => {
  4.       console.log('热更新了')
  5.   })
  6. }

DllPlugin(动态链接库插件)

  • 前端框架如vue React，体积大，构建慢
  • 较稳定，不常升级版本
  • 同一个版本只构建一次即可，不用每次都重新构建

    webpack已内置DllPlugin支持

DllPlugin - 打包出dll文件
DllReferencePlugin - 使用dll文件