webpack系统学习（五）webpack和Code Solitting 代码分割

慌张的唐同学

已于 2022-04-26 10:35:04 修改

阅读量575

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

于 2022-02-14 17:03:59 首次发布

本文链接：https://blog.csdn.net/Niall_Tonshall/article/details/122925783

版权

本文探讨了如何通过webpack实现代码分割，以优化前端应用的加载速度。介绍了手动代码分割，以及利用webpack的Code Splitting和SplitChunksPlugin自动进行代码分割，通过实例详细解释了配置和工作原理，旨在提升首次加载和后续更新的效率。

摘要由CSDN通过智能技术生成

观察下面的代码：

//index.js
import _ from 'lodash';//大小为1mb

console.log(_.join(['a', 'b', 'c'],'-'))//这一行的大小为1mb

我们假设lodash包的大小为1mb，index.js中的console.log(_.join(['a', 'b', 'c'],'-')) 也需要1mb的大小。这样打包之后，我们发现：

打包后生成的main.js文件较大（2mb左右），加载时间会很长；
一般情况下，我们不会更改lodash包中的内容，但是index.js中的代码我们可能会随着业务需求的改变而修改，所以当我们改变了index.js 的内容之后，用户需要重新加载一次main.js，响应时间较长，浪费了网络资源。
有没有方法能够使lodash和业务代码分开打包呢？
这其实就是代码分割！

我们新建一个lodash.js

import _ from 'lodash';

window._ = _

在lodash.js文件中单独引入lodash，并将lodash挂载到window上面。
修改index.js：

console.log(_.join(['a', 'b', 'c'],'-'))

然后修改webpack.config.js:

...
  entry: {
   
    lodash: './src/js/lodash.js',//添加新的入口文件，并且lodash.js应该在main的上面
    main

关注

专栏目录