北京中科专家 http://finance.sina.com.cn/chanjing/b/20091014/11153079059.shtml本文原载于SegmentFault专栏“前端进阶”作者：Jerry谭金杰整理编辑：SegmentFaultwebpack马上要出5了，完全手写一个优化后的脚手架是不可或缺的技能。本文书写时间年5月9日,webpack版本4.30.0最新版本，所有代码均出自手写，亲自试验过可以运行达到优化效果。杜绝5分钟的技术，先深入原理再写配置，大家一起学习参考。实现需求：识别JSX文件treeshaking摇树优化删除掉无用代码PWA功能，热刷新，安装后立即接管浏览器离线后仍让可以访问网站还可以在手机上添加网站到桌面使用CSS模块化，不怕命名冲突小图片的base64处理文件后缀省掉jsxjsjson等实现React懒加载，按需加载，代码分割并且支持服务端渲染支持lesssassstylus等预处理codespliting优化首屏加载时间不让一个文件体积过大提取公共代码，打包成一个chunk每个chunk有对应的chunkhash,每个文件有对应的contenthash,方便浏览器区别缓存图片压缩CSS压缩增加CSS前缀兼容各种浏览器对于各种不同文件打包输出指定文件夹下缓存babel的编译结果，加快编译速度每个入口文件，对应一个chunk，打包出来后对应一个文件也是codespliting删除HTML文件的注释等无用内容每次编译删除旧的打包代码将CSS文件单独抽取出来让babel不仅缓存编译结果，还在第一次编译后开启多线程编译，极大加快构建速度等等....webpack中文
转载请注明：http://www.aierlanlan.com/rzfs/8823.html
