上次分析到通过devtool的配置项来设置source map,在线上环境可以通过设置成cheap-module-source-map来生成单独的map文件,但是map文件在线上环境会不会每次都加载呢?如果加载的话,会不会造成带宽和请求的浪费呢?
笔者也有这样的疑问,于是在网络上查了一下。后来才了解到,在浏览器中,只有在调试模式下才会自动下载map文件,平时线上环境的话,是不用担心这个问题的。
在使用webpack构建单页面应用时,为什么要进行代码分割?
如果entry中只配置了一个入口,那么如果从这个入口文件开始引入的公共库的代码过大,打包出来会只有一个bundle文件。当浏览器端加载这样一个体积太大的bundle时就会造成加载过慢。
通常来讲我们的公共库代码是不经常修改的。但是我们的业务代码是经常要修改的,如果打包到不同的bundle文件可以更好的利用浏览器的缓存,在浏览器端来复用之前的公共库的bundle文件。
那如何通过代码分割来优化呢?
在webpack3中可以通过CommonsChunkPlugin来进行代码分割,但是webpack4中,官方提倡使用SplitChunksPlugin这个插件,所以本次主要讲解的也是在webpack4中通过SplitChunksPlugin这个插件来实现代码分割的方法。
首先要先弄懂一个预备知识点,就是在webpack中,什么叫做chunk,什么叫做bundle?
下面这种图