Tree Shaking清除未引用代码（dead-code）
webpack生产模式打包的优化过程中，自动开启tree shaking，检测未引用代码，然后清除
在mode为development、none时，需要配置optimization
module.exports = {
// ... 其他配置项
optimization: {
// 模块只导出被使用的成员
usedExports: true,
// 尽可能合并每一个模块到一个函数中
concatenateModules: true,
// 开启压缩代码功能 压缩输出结果
minimize: true
}
}
tree-shaking实现 过程用到webpack的两个优化功能
-
usedExports-打包结果只导出外部用到的成员
-
minimize-压缩打包结果例子
sideEffects副作用
用于标识代码是否有副作用，从而提供更大的压缩空间
模块副作用指的是模块执行的时候除了导出成员，是否还做了其他事情
Code Splitting分块打包
webpack实现前端模块化优势固然明显，但也存在弊端：最终会将包打包到一起 All In One的方式导致包过大
合理方案：code Splitting将打包结果按照一定规则分离到每个bundle中，按需加载 降低应用的启动成本，提高响应速度
webpack实现分包的方式
-
根据业务配置多个打包入口，输出多个打包结果
-
结合ES Modules`动态导入，按需加载模块
多入口打包
多入口打包适用于多页应用，一个页面对应一个打包入口，对于不同页面公用的部分 提取到公共的结果中
例子
动态导入
按需加载：应用运行过程中，需要哪个模块资源，才去加载
webpack支持使用动态导入的方式实现模块按需加载，而且所有导入的模块都会被提取到单独的bundle从而实现分包
例子
优化webpack构建速度和打包结果
为了开发阶段更好的体验，打包结果会越来越臃肿，因为webpack为实现这些特性 自动往打包结果中添加一些内容
不同环境配置
webpack创建不同环境配置的方式：
判断环境名返回不同配置对象，适用中小型项目，项目复杂，配置也会变得复杂
├── webpack.common.js ···························· 公共配置
├── webpack.dev.js ······························· 开发模式配置
└── webpack.prod.js ······························ 生产模式配置
生产环境下的优化插件
webpack4的production模式，内部已开启很多通用的优化功能
几个主要优化功能：
Define Pluginn
用来为代码中注入全局成员 production模式下，默认通过DefinePlugin往代码中注入proces.env.NODE_ENV变量
很多第三方模块通过这个变量去判断运行环境例子
Mini CSS Extract Plugin
css文件打包，一般使用style-loader处理，最终打包结果是CSS代码嵌入到JS代码中
mini-css-extract-plugin可以将CSS代码从打包结果中提取出来
需要使用插件提供的loader替换掉style-loader，以此来获取所有样式
打包之后，样式存入独立的文件中，通过link标签引入页面
Optimize CSS Assets Webpack Plugin
生产模式会自动压缩js代码，但是通过mini-css-extract-plugin打包的css文件不会自动压缩
此插件不是配置在plugins中 而是添加到optimization对象中的minimizer属性
原因：配置在plugins中 插件在任何情况下都会工作，配置在minimizer中只会在minimizer特性开启会工作
这样配置会导致js文件不会被压缩
原因：设置了minimizer使用自定义压缩器插件，内部的js压缩器（terser-webpack-plugin）会被覆盖，需手动添加回来
[例子](
网友评论