tree shaking (webpack V4.0之后 mode为produciton时 默认支持)
Tree Shaking的含义是把一个模块里没用的东西都摇晃掉。
一个模块可以理解为一个文件,例如a.js,里面会导出很多内容,当我们去引入这个树的一部分,那么引用的部分做打包,不引入的部分剔除掉,这就是tree shaking概念。
注意:Tree Shaking只支持ES Moudule的引入,也就是支持import模块的引入,如果使用const add = require('./a.js)这种Common JS的引入方式,那么Tree Shaking是不支持的,这是因为import这种ES Moudule的引入方式,它的底层是一个静态引入的方式,而Common JS是一种动态引入的方式,Tree Shaking只支持静态引入的方式。
原理:
利用了es6模块的特点: 只能作为模块顶层的语句出现;import的模块名只能是字符串常量;import binding是immutable的。
代码擦除:uglify阶段删除无用代码
代码分割
意义:对于大的Web应⽤来讲,将所有的代码都放在⼀个⽂件中显然是不够有效的,特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack有⼀个功能就是将你的代码库分割成chunks(语块),当代码运行到需要它们的时候再进行加载。
适用场景:抽离相同代码到一个共享块;脚本加载,使得初始下载的代码更小。
懒加载js的方式:
CommonJS 使用require.ensure
ES6使用动态的import(目前没有原生支持,需要babel转换)
如何使用动态import?
1. 安装babel插件 npm i @babel/plugin-syntax-dynamic-import --save-dev
2. 配置.babelrc文件的plugins: ["@babel/plugin-syntax-dynamic-import"]
ESLint
优秀的eslint规范实践:
Airbnb: eslint-config-airbnb 、eslint-config-airbnb-base
腾讯:alloyteam团队的eslint-config-alloy 、ivweb团队的 eslint-config-ivweb
命令行输出优化
stats
选项让你更精确地控制 bundle 信息该怎么显示。 如果你不希望使用 quiet
或 noInfo
这样的不显示信息,而是又不想得到全部的信息,只是想要获取某部分 bundle 的信息,使用 stats 选项是比较好的折衷方式。
使用friendly-errors-webpack-plugin插件优化构建日志;stats 设置成 errors-only
构建异常和中断处理
webpack v4.0之前构建失败 不会抛出错误码(error code)
node.js 中的process.exit规范:
0: 表示成功完成,回调中的error为null;
非0表示执行失败,回调中的error不为null,error.code就是传给exit的数字。