小伙伴们晚上好，欢迎来到前端小妙招。相信大家都知道我们平时写的代码需要经过语法转化和插入polyfill处理才能在生产上使用。但是如果实际运行的代码都是低版本代码，岂不是用新浏览器会加载大量根本用不上的代码？如果用高版本浏览器访问，能够直接运行高版本浏览器的语法，就可以大大减小在高版本浏览器下的包体积。
使用script type等于module可以让支持 ES module的浏览器运行，不支持 ES module 的浏览器忽略。
使用script no module可以让支持 ES module 的浏览器忽略，不支持 ES module 的浏览器运行。
我们可以利用以上特性写个打包方案输出两个版本，用不同的配置进行使用。
在中低版本中，我们需要通过模块化运行时来管理模块，我们把代码转化为AMD 或 system JS，然后用 amd 或 systemjs 的加载器进行加载模块。
我们看效果。
Nice
这里我自己写了一个AMD加载器，以提升性能。
在高版本中，转化为 es2015。
但是es2015不支持动态import，而且我们需要有预加载功能，这里我们基于ESM写一个模块化运行时，功能包括含预加载的动态import和Safari 10 no module polyfill。
这样我们就在高版本省去了 Promise、Map、Set的打入和Class、箭头函数的转化等。
我们看看最终效果
这是高版本，这是中低版本
Nice
中低版本我们也可以按照这个思路进一步细分
IE8 到 IE9 有巨大的差异，我们用条件注释再分为低中两个版本。
低版本不会打入其不支持的功能，中版本也不会打入已支持的功能。
还可以用别名插件让低版本使用低版本实现的相关库（比如 anu js）
我们引入个 React 看看效果
Nice
通过这种方式使用CSS，我们也可以通过不同版本的 PostCSS 配置打出不同版本的 CSS 可以减少加载的代码。
我们随便写一个CSS，
注意看，低版本自动加入了CSS Hack，中版本自动补全了浏览器前缀。
不得不说工程化真是太有用了。
好了，本期视频就到这啦，喜欢的小伙伴可以点击订阅收藏和关注，我们下次见了，拜拜。
