高级之路篇七：webpack打包性能优化

1、只加载与首屏相关的资源文件。如在vue或react框架中采用路由懒加载、按需加载的方式，减少首页需要载入的资源。

2、延迟加载或按需加载。script标签上加上async、defer

     async：

         1）使得script脚本异步的加载并在允许的情况下执行；

         2）async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。

     defer：

         1）异步的下载该文件并且不会影响到后续DOM的渲染； 

         2）多个设置了defer的script标签存在，则会按照顺序执行所有的script；     

         3）defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

3、第三方库文件作cdn分发，配置webpack使得打包时不再包含本地第三方库的打包。

......

externals:{
  "mint-ui":"mintui",
  "vue":"Vue"
},

.....

4、公共文件抽离

5、代码分割

6、启用js、css、html压缩，打包时开启gzip压缩，关闭sourcemap。

7、生产环境去掉console代码，减少代码体积。

8、效果尽量使用css3完成，小图片通过一定的工具合成雪碧图或者转成base64。

9、代码优化请查阅本人其他高级之路系列的其他板块内容。