Webpack和Code Splitting

最新推荐文章于 2023-11-01 08:45:14 发布

_dalianmiao

最新推荐文章于 2023-11-01 08:45:14 发布

阅读量459

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/hani_wen/article/details/106002612

版权

webpack 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一.Webpack和Code Splitting之间的关系
Code Splitting指的是代码分割，什么是代码分割，代码分割和webpack有什么关系呢

CleanWebpackPlugin只能清理当前目录生成的dist文件，不可以删除当前目录同级的dist文件

  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new CleanWebpackPlugin (['../dist'])
  ]

这样处理是会报错的，可以写一个root子的配置项，放置绝对路径，这里指的是根路径是root定义的根路径

  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new CleanWebpackPlugin (['dist'], {
      root: path.resolve(__dirname, '../')
    })
  ]

现在路径指向了根路径，所以删除该路径下的dist文件

回归正题Code Splitting是什么？

在项目中引入lodash第三方包 npm install lodash 它是一个功能集合，提供了很多功能方法，可以让我们高效能的去使用一些字符拼装的一些函数等等
在index.js中使用：

import _ from 'lodash';
console.log(_.join(['a', 'b', 'c']))

在这里插入图片描述
我们打包生成的dist文件下，有main.js，也就是我们打包的过程中，lodash这个工具库和业务代码都被打包到了一个文件中，假设一个文件对应的业务非常非常的长，此时又引入了工具库，这种方式的打包，生成的js文件非常的大，加载时间会长，lodash这种库我们是不会改动的，但是我们的业务逻辑是经常改变的，重新打包生成新的文件，用户访问的话又要重新加载。那我们如何解决这个问题呢
我们在src目录下创建lodash.js文件

import _ from 'lodash';
window_ = _;

在该文件上引入lodash，并将lodash挂载到了全局window上，这样我们在控制台或者其他地方就可以使用这个变量了
在index.js文件中写在业务逻辑就可以了，在webpack中配置打包入口

  entry: {
    main: "./src/index.js",
    lodash: "./src/lodash.js"
  },

重新运行打包
在这里插入图片描述
生成的index.html文件会同时引入这两个js文件，这样我们就换了一种打包方式，以前打包在一个文件中，就意味着用户需要加载完很大的文件才能运行，现在拆成两个js文件，浏览器上可以并行的加载文件，在大量的实践中，同时去加载两个1MB的文件可能比加载一个2MB的文件要快一些，之前改动业务代码，然后用户需要把一个2MB的文件加载才能运行新的内容，但是我们拆开的打包方式，只改动业务代码，用户不需要重新加载lodash.js,因为lodash没有改动，它在用户浏览器中是有缓存的，用户只需要加载main.js文件即可，这样重新访问的就能提升页面展示的速度
所以在实际的开发中，我们会通过对代码公用部分进行一些拆分。来提升我们运行的速度，这种代码拆分，就是Code Splitting

在没有webpack ，我们也可以实现codeSplitting，为什么现在webpack和codeSplitting有所绑定了呢？因为webpack有一些插件可以非常容易的帮助我们实现codeSplitting，在webpack4当中有插件和weback捆绑，不需要安装就可以直接用。当使用这种插件再去做代码分割就会变得非常简单
现在我们上面做的代码分割，实际上是自己做的代码分割，怎么说呢，我们知道我们要引入lodash的库，所以我们自己把一个main.js拆成了lodash.js和index.js,自己动手做了这件事情，所以它不够智能，在webpack里面实际上通过它自带的一些插件可以自动的帮我们做codeSplitting。那webpack是如何做的呢？

我们删除lodash.js文件，在index.js中引入lodash，在webpack的配置文件中配置

  optmization: {
    splitChunks: {
      chunks: 'all'
    }
  },

这个配置的含义是帮助做代码分割了，那它是如何做的呢？打包运行
在这里插入图片描述
在打包生成的mian.js，只有index.js的逻辑代码，虽然引入了lodash，但是lodash库并没有打包进去这个文件，在vendors文件中，把lodash单独提取出来，也就是之前我们需要手动的去做代码分割，但通过webpack一个简单的配置，webpack就知道了当遇到这种公用的类库的时候，就会自动把类库打包生成一个文件，把业务逻辑拆分成一个文件。这就自动帮助我们实现了codeSplitting，这就是我们经常说的webpack中的codeSplitting，codeSplitting是webpack非常有竞争力的一个功能。

在index.js中，我们引入lodash文件，然后使用它，先引入后使用，这是一个同步的逻辑，处理这种同步的逻辑，webpack借助刚才的配置回去分析什么样的模块改给它打包生成单独的文件做代码分割，实际上除了同步的引入模块，还可以做异步模块的引入

function getComponent () {
  return import('lodash').then(({ default: _ }) => {
    var element = document.createElement('div')
    element.innerHTML = _.join(['a', 'b', 'c'], '-')
    return element
  })
}

去掉webpack中codeSplitting配置，一开始文件中并没有加载lodash库，异步加载，通过jsonp的形式去获取lodash库代码，然后获取完了之后then方法会执行，default： _ :这种写法是考虑commonJS的导出代码做的兼容，实际上引入的lodash库会被放在_的变量上。
这个函数执行之后返回值是一个import，import的返回值实际上又是一个Promise，所以可以接收到返回的内容，内容就是return的element

getComponent().then(element => {
  document.body.appendChild(element)
})

在这里插入图片描述
调用getComponent异步去获取lodash库，获取这个库之后，创建一个element返回回来，返回回来then方法就能接收到这个element，然后挂载到页面上。打包生成的文件

dist文件中的main.js只有逻辑代码，lodash库被打包在0.js文件中。webpack在做同步性质的打包的时候，回去分析代码，把改提出的内容提取成一个文件单独存放，自动的做代码分割。对异步加载的代码。webpack同样会去做代码分割。异步加载的lodash会被单独的放在一个文件中。同步的需要设置配置文件，异步的即便是不设置codeSplitting，写异步的载入组件的方式，异步载入的组件也会自动的被打包到一个单独的文件中，这也是另外一种wepack的代码分割

总结：
1.代码分割，和webpack无关（代码分割是一个单独的概念，用来提升整个项目的性能）
2.webpack中实现代码分割，两种方式
（1）.同步代码：只需要在webpack.common.jsz中做optimization的配置即可
（2）.异步代码（import）：import这种语法异步的引入组件或者模块，这种异步代码无需做任何配置，会自动进行代码分割放置到新的文件中