webpack 的优化设置

webpack4

tree sharking

1. 基于es6的export inport
2. 没使用到的代码，去掉
3. 不想被tree sharking 的文件，在package,json中配置 sideEffects配置
4. 注意Babel默认配置的影响， ’@babel/preset-env':{modules: false...}', 告诉babel 不要将es6模块转成其他模块的语法，这样tree sharking 才起作用

production模式下是默认开启的

 

js压缩

1. webpack 4 后引入uglifyjs-webpack-plugin（压缩方式）
2. 支持es6替换的为terser-webpack-plugin（新的压缩方式）（生产模式下，默认方式）
3. 减小js文件的体积

作用域提升

1. 代码体积减少
2. 提高执行效率
3. 同样注意babel 的modules配置

 

Babel7优化配置

1. 在需要的地方引入poliyfill,   浏览器部分不支持的语法，兼容性优化，(npm @babel/polyfill), 在Babel.config.js中配置，'@babel/preset-env':{ 'useBuiltIns': 'usage'}，polyfill很大，剪掉没用到功能
2. 实现辅助函数的复用,  在Babel.config.js中配置，plugins 添加'@babel/plugins-transform-runtime'
3. 根据目标浏览器按需转码，在Babel.config.js中配置，'@babel/preset-env':{ 'target': 'browser': ['>0.25%']}，