本篇讲的是 Webpack 对于优化产出代码，也就是对于产品性能的优化，
优点：代码体积更小；合理分包不重复加载；速度更快，内存使用更少。
懒加载 import
提取公共代码
IgnorePlugin 避免引入无用模块
小图片base64编码 // 减少请求次数
bundle加hash
使用 CDN加速
使用 production
Scope Hosting 作用域提升
小图片base64编码 减少请求次数
webpack.prod.js：
module: {
rules: [
// 图片 - 考虑 base64 编码的情况
{
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 小于 5kb 的图片用 base64 格式产出
// 否则，依然延用 file-loader 的形式，产出 url 格式
limit: 5 * 1024,
// 打包到 img 目录下
outputPath: '/img1/',
// 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
// publicPath: 'http://cdn.abc.com'
}
}
},
]
},
bundle加hash [缓存]
webpack.prod.js：
output: {
filename: 'bundle.[contentHash:8].js', // 打包代码时，加上 hash 戳
path: distPath,
},
使用CDN加速
webpack.prod.js：
① 修改所有静态文件 url 的前缀（如 cdn 域名）
output: {
filename: 'bundle.[contentHash:8].js', // 打包代码时，加上 hash 戳
path: distPath,
publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名）]
},
② 将html中的js文件和css文件上传到cdn上去
使用production 模式
webpack.prod.js：
mode: 'production', //webpack4.0+
- 1.自动开启代码压缩
- 2.Vue、React 等会自动删除调试代码（如开发环境的warning）
- 3.启动 Tree-Shaking
Tree-Shaking 通常用于描述移除 JavaScript 上下文中的未引用代码;
它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。
知识延伸：ES6 Module 和 Commonjs (Node )区别
- ES6 Module 静态引入，编译时引入
- Commonjs 动态引入，执行时引入
- 只有 ES6 Module 才能静态分析，实现Tree-Shaking
Scope Hosting 作用域提升
背景：
过去捆绑时webpack的权衡之一是捆绑中的每个模块都将包裹在单独的函数闭包中。这些包装函数使您的JavaScript在浏览器中执行的速度变慢。多个文件打包后，产生多个函数，
Scope Hosting 可以“提升”或将所有模块的作用域统一，从而使代码在浏览器中的执行时间更快。
优点：
代码体积更小
创建函数作用域更少
代码可读性更好
Scope Hosting 开启条件：
必须使用ES6模块化语言组织的代码才能实现Scope Hosting效果
所以针对Npm中的第三方模块优先采用 jsnext:main 中指向 ES6模块发语法的文件
配置 webpack.prod.js：
① 引用 ModuleConcatenationPlugin 插件
const ModuleConcatenationPlugin = require('webpack/lib/ModuleConcatenationPlugin');
② 针对Npm中的第三方模块优先采用 jsnext:main 中指向 ES6模块发语法的文件
resolve:{
mainFields:['jsnext:main','bromser','main']
},
③ 开启 Scope Hosting，在plugins中实例：
plugins:[
new ModuleConcatenationPlugin(),
]
