zoukankan      html  css  js  c++  java
  • 08-代码分割- lodash和webpack代码分割

    我们在入口文件index.js中引入lodash,执行一个方法:

     运行发现打的包是2.2MB了,很大,因为这样引入是把lodash全部引入了,体积很大

     我们想要的是,像是引入的第三方库我们不想每次打包的时候重新去加载,我们只打包自己的业务逻辑代码,第三方库我们让浏览器缓存,运行的时候直接拿缓存。

    1)我们把lodash拆出去:

    在配置文件中(接07中已经分生产模式和开发模式打包),修改入口文件和出口文件

     2)入口文件index.js 只放了业务逻辑代码

     3)在根目录新建lodash.js文件,并把其挂载到window上

     4)执行打包:打包后的输出目录中就有了index.js和lodash.js两个文件

     5)我们发现体积变小了,原来2MB多

     总结:以上code Splitting这种属于我们自己去用技巧做的代码分割,特点就是打出去两个文件,打出去的index,html中会引入这两个文件,好在是浏览器支持并发,如果引一个大文件,浏览器加载过程中还没有加载出来时候会出现短暂白屏,影响用户体验,所以我们分割打包出去。让用户更快的能看到内容


     其实code Splitting概念 与 webpack并没有直接的关系,只不过webpack中提供了一种更加方便的方法供我们实现代码分割

    webpack自身是如何实现代码分割的?

    基于https://webpack.js.org/plugins/split-chunks-plugin/ 

    先看没做代码分割打出来的体积:

    入口文件inde.js还是要引入lodash.

     配置文件中:入口文件还是一个index.js,下面配置代码分割

     运行打包:可以看到在打包出口目录中生成了一个vendors~main.js文件,这个文件是分析lodash的

    发现打包后体积跟我们上面那种分割体积差不多 

     做代码分割时候配置的其他参数:


    总结:加了代码分割,可以提高用户体验,怎么提高?

    1.把业务代码和第三方引入库分割开来分别打包,原本一个大文件一起去加载,但是浏览器可以支持并发,就可以同时加载分割后的东西,先加载出来的就先显示给用户看。

    2.第三方库我们不想每次打包的时候重新去加载,我们只打包自己的业务逻辑代码,第三方库我们让浏览器缓存,运行的时候直接拿缓存。

    3.在多页面应用程序中,服务器会传输一个新的 HTML 文档给你的客户端。页面重新加载此新文档,并且资源被重新下载。然而,这给了我们特殊的机会去做很多事:

    • 使用 optimization.splitChunks 为页面间共享的应用程序代码创建 bundle。由于入口起点增多,多页应用能够复用入口起点之间的大量代码/模块,从而可以极大地从这些技术中受益。

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    webpack项目优化高级特性:代码分割、分块打包、动态导入、按需加载

  • 相关阅读:
    自定义View的ToolBar布局报错Error:(2) No resource identifier found for attribute 'context' in package 'c
    在学git之主分支 branch
    获取发布版SHA1
    关于开启线程与UI的操作
    播放音频和视频(VideoView控件)
    通知栏Notification的应用
    Android 真机调式 Installation failed with message 远程主机强迫关闭了一个现有的连接。. It is possible that this issue is resolved by uninstalling an existing version of the apk if it is present, and then re-installing. WA
    运行程序申请危险权限
    mysql乐观锁总结和实践
    Nginx配置文件nginx.conf中文详解
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14402379.html
Copyright © 2011-2022 走看看