第31讲代码分割

对于⼤的 Web 应⽤来讲，将所有的代码都放在⼀个⽂件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使⽤到。webpack 有⼀个功能就是将你的代码库分割成 chunks（语块），当代码运⾏到需要它们的时候再进⾏加载。

比如只加载首屏

懒加载JS脚本的方式

CommonJS： require.ensure

ES6: 动态import （目前还没有原生支持，需要babel转换，if else可以用通过逻辑按需加载）

如何使用动态import

安装babel插件

npm install @babel/plugin-syntax-dynamic-import --save-dev

ES6 { "plugins": ["@babel/plugin-syntax-dynamic-import"], ...... }

代码分割效果

加载可以通过代码逻辑控制，比如点击一个按钮等

.babelrc文件

32讲在webpack使用ESLint

ESLint的必要性

例子：

使用ESLint规范性检查用来规避此类问题，及时暴露错误

行业里面规范的优秀ESLint实践

Airbnb: eslint-config-airbnb、 eslint-config-airbnb-base 
·alloyteam团队 eslint-config-alloy(https://github.com/AlloyTeam/eslint-config-alloy) 
·ivweb 团队：eslint-config-ivweb(https://github.com/feflow/eslint-config-ivweb)

制定团队的ESlint规范

ESLint如何执行落地

和CI、CD系统集成
和webpack集成

方案一 webpack与CI/CD集成

本地开发阶段增加precommit钩子

方案二 webpack与ESLint集成

参考

极客时间程柳峰老师《玩转webpack》

《玩转webpack》学习笔记 Day5 之第三章（中）

第31讲 代码分割