之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.为什么要进行Code Splitting

我们先举一个例子，在index.js中引入lodash。

然后进行打包，我们会发现按照以前的配置，会把lodash和我们的业务代码打包到一起，这其实会有问题：

用户第一次进入页面，会加载main.js(假如是2MB)，当业务逻辑发生变化，重新打包上线后，用户进入页面又要重新加载2MB的文件，就会造成浪费。lodash这个库在我们开发过程中，基本不会去改变里面的内容，所以应该把这部分代码单独生成一个js文件，这样业务逻辑变化就不会影响到lodash的代码了。

2.初步Code Splitting

我们新建一个lodash.js，然后在里面引入lodash，并且挂在到window上，然后index.js直接调用lodash的方法。

重新配置entry和output:

重新进行打包，会有两个JS文件。

在这种情况下，用户第一次进入页面，加载两个JS，业务逻辑发生变化重新打包后，lodash.js并不需要重新加载，节约了资源，也节省了一部分时间。

3.利用webpack做Code Splitting

首先重新引入lodash库

然后在webpack.config.js中添加配置项

进行打包，观察打包的文件，除了main.js，还多生成了一个vendor.js文件，我们观察main和vendor发现，main.js里面只有业务逻辑，而vendor里面只有lodash的代码。

使用这个配置项，webpack自动帮我们进行了代码分割。

4.动态引入库

新建一个js文件，增加如下代码。

但是现在webpack对动态引入处于实验性阶段，所以想要打包还要安装一个插件。

cnpm install babel-plugin-dynamic-import-webpack -D

在.babelrc中增加如下配置。

进行打包，打包后发现生成这些文件。

这时，lodash的代码都在0.js中，所以webpack不仅能分割同步引入的代码，还可以分割异步引入的代码。

转载于:https://juejin.im/post/5cd04e2ee51d45379a1642f5

复习webpack4之Code Splitting相关推荐

【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
react-router4 + webpack Code Splitting
项目升级为react-router4后,就尝试着根据官方文档进行代码分割.https://reacttraining.com/react-router/web/guides/code-splittin ...
代码分割（Code Splitting）
代码分割(Code Splitting) 为什么要分割代码?代码分割有什么作用呢? 答:两个方面. 1.项目包含第三方依赖库以及自己写的代码,打包出的文件会比较大,在用户访问系统的时候,由于请求的资源 ...
【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载
webpack系列文章: [Webpack 性能优化系列(9) - 多进程打包]极大的提升项目打包构建速度!!! [Webpack 性能优化系列(8) - PWA]使用渐进式网络应用程序为我们的项目添 ...
Webpack系列——代码分离(Code Splitting)
代码分离(Code Splitting) // index.js import _ from 'lodash'; const ele = document.createElement('div'); ...
Webpack和Code Splitting
一.Webpack和Code Splitting之间的关系 Code Splitting指的是代码分割,什么是代码分割,代码分割和webpack有什么关系呢 CleanWebpackPlugin只能清 ...
Webpack 大法之 Code Splitting
今天,大家要学习的内容是 Webpack 大法中的 Code Splitting . Code Splitting 是什么以及为什么在以前,为了减少 HTTP 请求,通常地,我们都会把所有的代码都打 ...
webpack 和 code splitting
Code Splitting指的是代码分割,那么什么是代码分割,webpack和code splitting又有什么样的联系呢? 使用npm run dev:"webpack-dev-ser ...
Webpack的Code Splitting实现按需加载
一. 什么是Code Splitting? 在最开始使用Webpack的时候, 都是将所有的js文件全部打包到一个build.js文件中(文件名取决与在webpack.config.js文件中outp ...

复习webpack4之Code Splitting

1.为什么要进行Code Splitting

2.初步Code Splitting

3.利用webpack做Code Splitting

4.动态引入库

复习webpack4之Code Splitting相关推荐

最新文章

热门文章