webpack 基础到构建（七）

十八，代码分割
    ---问题引入：
        1，某些平台项目【微信小程序】中项目大小的限制；
        2，项目体量大或敏捷开发带来的需求更改，需要设置多入口；
        3，多页面应用需求
        4，某js需要公共使用，需要单独打包

    ---webpack设置中，一个入口就会对应一个输出边界，
    ---so，我们可以通过配置entry和output来实现，这里每次都需要手动去加或者改，肯定是很麻烦的，而且，文件相互引用，多引用都是带来的问题；

    18.1  【方式1，多入口配置法】设置entry为对象，设置多入口，如图18.1

图18.1，可使用[name]来设置输出文件名

    18.2  【方式2，optimization设置】可以将node_modules中的代码单独打包输出，如图18.2

图18.2

    测试，可发现，前两种方式同时使用，将会检测同文件引入，不会对同个包进行多次打包 

    18.3  【import动态导入】，无需修改入口entry，需要在入口文件中添加配置，如下图

结合平日的需求，其实第三种方式应该是最常见的

十九，懒加载 lazy loading
    ---性能优化常谈之一；目的： 触发某些条件后再加载js内容
    ---使用import引入文件，即可。

    if(xxxx) {
        import('./ccc.js').then()

    }

二十，预加载 prefetch
    ---性能优化常谈之一；目的： 提前加载某些js内容
    ---解决问题：正常加载限制下【并行加载数量限制等，如http并行加载最多6个】，需要加载更多的文件，又或者是在浏览器空闲时加载js资源【防止卡死】，
    ---兼容性较差

懒加载与预加载

二十一，PWA 【cache+serviceWorker】
    ---操作离线可访问需求
    ---插件： workbox-webpack-plugin，生成serviceWorker配置文件，这里的serviceWorker存在兼容问题，这也是PWA的兼容问题

    21.1  添加package.json中的eslint配置
    21.2  编辑区入口文件添加pwa设置，

index.js pwa配置 添加eslint识别

测试可使用 npm i serve -g部署本地服务，通过 serve -s dist 启动服务器，即可根据终端提示进行查看网页测试；F12查看资源的来源或者查看浏览器Cache里面的内容，也可以将网络设置offline，再次刷新进行测试