- @babel/preset-env 基本的兼容性处理
- core-js 按需兼容
terser-webpack-plugin
因为uglifyjs-webpack-plugin
不支持 es6
- eslint、eslint-loader
- babel 缓存
- 文件资源缓存:加 hash 值 或 加 chunkhash 或 加 contenthash
- .browserslistrc
- 在
package.json
中配置,"sideEffects": false
所有代码都没有副作用(都可以被 tree shaking) - 问题:可能会把
css / @babel/polyfill
(副作用)文件干掉,要写成"sideEffects": ["*.css"]
前提:1.必须使用 ES6 模块化 2.开启 production 环境 作用:减少代码体积
- 业务代码和第三方库分离打包,实现代码分割
- 业务代码中的公共业务模块提取打包到一个模块
- 第三方库最好也不要全部打包到一个文件中,因为第三方库加起来通常会很大,把一些特别大的库单独打包,剩下的加起来如果还是特别大,就按照一定大小分割成若干模块
- 某些包过大 不通过打包方式引入
- dev 环境
- 优化打包构建速度
- 优化代码调试
- prod 环境
- 优化打包构建速度
- 优化代码运行的性能