webpack和Code-Splitting

本文主要是介绍webpack和Code-Splitting，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Code-Splitting代码分割初体验

• webpack默认将所有的依赖文件(包含第三方包中的代码)统一导包到输出文件中

• 前提:
  a: 入口文件中 第三方包模块1MB和业务逻辑代码1Mb,不考虑压缩,打包生成的main.js为2Mb
  b: 在浏览器用户访问我们的index.html文件,会首先加载2Mb的main.js文件

• 缺点

  1. 打包文件会很大,加载时间会很长
  2. 第三方包模块(lodash)我们是不会修改库里面的内容的,但业务逻辑代码,当我们改了业务逻辑代码,用户重新访问页面,又要加载2Mb的内容(main.js)

import _ from "lodash" // 第三方包模块
// 修改业务逻辑代码
const str = _.join(["1", "2", "3"], "***") //业务逻辑代码

• 改进原理分析;
  a: 将第三方包模块和业务逻辑代码分开打包成不同的js文件=>生成lodash(第三方包模块)和main.js(业务逻辑代码)
  b: 当业务逻辑代码发生变化的时,用户重新访问页面,只需加载1Mb的内容(main.js),因为在上一次访问该页面的时候,浏览器缓存了(lodash.js),loader.js没有发生变化,直接从浏览器缓存中取,不会从服务器再次请求loader.js资源
  c:用户初次访问页面的时候,依然要从服务器请求loadsh.js和main.js两个资源,然后交给浏览器缓存起来,第二次访问时,只是lodash.js没有发生变化,直接从浏览器缓存中取,main.js由于业务逻辑代码发生了变化而变化,该资源(main.js)从服务器请求得到
• 改进方法: Code-Splitting代码分割
• webpack配置选项 optimization.splitChunks=>告诉webpack要进行代码分割

 optimization: {splitChunks: {chunks: "all"}},

这篇关于webpack和Code-Splitting的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---