压缩js
压缩代码的主要是将代码转换成更小的格式。将代码无损的转换有用的代码。在转换的过程中重写代码的变量，移除整个没有用依赖的代码。
修护代码压缩过程
在webpack中，用两个字段来控制这个过程，optimization.minimize和optimization.minimizer。
我们通过uglifyjs-webpack-plugin来设置上面提到的两个参数。首先是安装，
npm install uglifyjs-webpack-plugin --save-dev
复制代码webpack.prod.js
...
const minifyJavaScript = ()=>({
optimization: {
minimizer: [new UglifyWebpackPlugin({ sourceMap: true })],
},
})
...
复制代码然后在webpack.config.js中合并代码。
对比之前的代码，很难发现有任何不同，我们可以再通过调用UglifyWebpackPlugin的console.log剔除功能来测试UglifyWebpackPlugin到地起作用了没，通过配置,
webpack.prod.js
...
const minifyJavaScript = ()=>({
optimization: {
minimizer: [new UglifyWebpackPlugin({
sourceMap: true,
uglifyOptions: {
compress: {
drop_console: true,
}
} })],
},
})
...
复制代码最后发现打包过后的代码已经剔除掉console.log。
当然还有其他的压缩工具，例如：
babel-minify-webpack-plugin
webpack-closure-compiler
butternut-webpack-plugin
提升代码运行速度
（待续）
压缩HTML
（待续）
压缩CSS
使用MiniCssExtractPlugin会导致css代码重复，它只是将css代码合并在一起，使用optimize-css-assets-webpack-plugin可以避免了这个问题并得到更好的结果。
设置CSS压缩
首先安装
npm install optimize-css-assets-webpack-plugin cssnano --save-dev
复制代码在文件中配置
webpack.prod.js
...
const minifyCSS = ({ options }) => ({
plugins: [
new OptimizeCSSAssetsPlugin({
cssProcessor: cssnano,
cssProcessorOptions: options,
canPrint: false,
}),
],
})
...
复制代码在webpack.config.js中合并代码
webpack.config.js
const productionConfig = merge(
...
minifyCSS({
options: {
discardComments: {
removeAll: true,
},
// Run cssnano in safe mode to avoid
// potentially unsafe transformations.
safe: true,
},
})
...
)
复制代码打包过后压缩效果很明细。
#树摇优化(Tree Shaking)
树摇优化是指根据上下文删除，没有使用的js代码，能够使用树摇优化是es2015赋予js的新特性。
验证树摇
util.js
const shake = () => console.log("shake");
const bake = () => console.log("bake");
export { shake, bake };
复制代码打包过后，在dist可以发现，在我们打包过后的文件中招不到console.log("bake")。
我们也可以通过
npm run build -- --display-used-exports.
复制代码来看那一些代码并没有被使用，这时候你在终端可以看到这两个关键子[no exports used]和[only some exports used: bake]
包级别的树摇优化
(待续)
Manifest
runtime
runtime以及伴随的manifest数据，主要指：在浏览器运行时，webpack用来连接模块化应用程序的所有代码；runtime包含：在模块交互时，连接模块所需的加载和解析逻辑；包括浏览器中的已加载模块的链接，以及懒加载模块的执行逻辑；
Manifest
一旦你的应用程序中，比如index.html文件，一些bundle和各种资源加载到浏览器中，会发生什么？你精心安排的/src目录的文件结构现在已经不存在了，所以webpack如何管理所有模块之间的交互呢？这就是manifest数据用途的由来； 当编译器（compiler）开始执行。解析和映射应用程序时，他会保留所有模块的详细要点，这个数据集合成为‘manifest’，当完成打包并发送到浏览器时，会在运行时通过manifest来解析和加载模块，无论你选择哪种模块语法，那些import或者require语句现在都已经转换为webpack_require方法，这个方法指向模块标识符（module identifier）。通过使用manifest中的数据，runtime将能够查询模块标识符，检索出背后对应的模块；