webpack4 - 3.Mode内置优化

webpack 4以上版本提供了mode配置选项，用来选择使用相应的内置优化。

mode选项有3个可选值：production （默认） 、development、none。

可以使用配置文件来指定mode

module.exports = {
  mode: 'production'
};

也可以在执行webpack命令时使用参数来指定mode

webpack --mode=production

1.production模式

webpack4在production模式下，会启用众多优化插件。

1.1 JS Tree Sharking

UglifyJsPlugin支持Tree Sharking，字面意思为“摇树”，在webpack中可以理解成打包过程中移除未使用的内容（js、css）。

继续使用前文的代码，部分修改如下：

src/index.js

import {test1} from './js/test'
document.body.innerHTML = test1()

src/js/test.js

export default function test1() {
    return "test1..."
}

export default function test2() {
    return "test2..."
}

export default function test3() {
    return "test3..."
}

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
};

执行webpack命令，生成dist/index.js文件，搜索"test1..."、"test2..."、"test3..."均能找到，说明在development模式下，test2()、test3()两个函数即使未使用，打包后还是存在的。

接下来尝试以production模式打包，这次不去修改配置文件，而是执行webpack --mode=production打包，检查生成的dist/index.js文件，可以发现仅能找到"test1..."，"test2..."、"test3..."已经不复存在了，而且文件大小也比之前小了很多，说明在production模式下，无用的js内容已经被移除了。

1.2 文件压缩

webpack4中，UglifyJsPlugin还支持文件压缩，这里以jquery为例实践。

安装jquery

npm install --save jquery

在src/index.js中引入jquery，并使用了jquery的标签选择器修改title内容

import $ from 'jquery'
import {test1} from './js/test'
document.body.innerHTML = test1()
$("title").html("title by jquery");

分别使用webpack --mode=development和webpack --mode=production打包

$ webpack --mode=development
Hash: 4fc1ab8359e975a61ce6
Version: webpack 4.18.0
Time: 350ms
Built at: 09/16/2018 5:57:00 PM
   Asset     Size  Chunks             Chunk Names
index.js  306 KiB   index  [emitted]  index
Entrypoint index = index.js
[./src/index.js] 124 bytes {index} [built]
[./src/js/test.js] 151 bytes {index} [built]
    + 1 hidden module

使用development模式打包时，生成的index.js文件大小为306kb

$ webpack --mode=production
Hash: 3488a0d6f12908778bda
Version: webpack 4.18.0
Time: 2311ms
Built at: 09/16/2018 5:58:00 PM
   Asset      Size  Chunks             Chunk Names
index.js  86.2 KiB       0  [emitted]  index
Entrypoint index = index.js
[1] ./src/index.js + 1 modules 280 bytes {0} [built]
    | ./src/index.js 124 bytes [built]
    | ./src/js/test.js 151 bytes [built]
    + 1 hidden module

使用production模式打包时，生成的index.js文件大小缩减至86.2kb。

总结：webpack4中使用production模式打包时，自动会启用JS Tree Sharking和文件压缩。

2.development模式

development模式下，webpack会启用NamedChunksPlugin 和 NamedModulesPlugin插件。

3.none模式

none模式下，webpack不会使用任何内置优化。