简单说下代码分割。 git仓库:webpack-demo
content.js
、header.js
、footer.js
分别打包为三个文件,然后我们在index.html
中用三个script
标签引入它们,很明显,上述过程其实就是一种手动式的代码分割。index.html
中引入的三个script标签加个async
属性,这样的话当我们首次进入页面的时候,就可以异步加载了,比起不做代码分割,可以提高页面渲染速度。Code Splitting
大概就是这么个概念,好处也是这么个好处,大概就这么个意思吧,只是,手动式未免有点麻烦。webpack
可以帮我们轻松的实现代码分割,我们进入到webpack.config.js
中,添加如下几行配置:module.exports = {
mode: "development",
entry: {
main: "./src/index.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
+ // 代码分割codeSpliting
+ optimization: {
+ splitChunks: {
+ chunks: "all"
+ }
+ },
// ...
};
npm run build
打包后,在dist
文件下就可以看到自动生成了一个verdor~main.js
文件,打开它,我们就可以看到它帮我们把src/index.js
中引入的axios
拎出来了(也就是代码分割了)。
code spliting
src/index.js
中import
引入的又不仅仅是axios
,还有header.js
、content.js
、footer.js
等等,怎么那些没有分割出来单独为一个文件?下文详解。webpack
帮我们实现代码分割,利用的就是SplitChunksPlugin这个插件,这个可配置的内容就很丰富了,只拿几个常见的选项来举例一下。splitChunks: {}
,其实就是默认相当于:module.exports = {
// ...
optimization: {
splitChunks: {}
}
// 等同于:
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
minRemainingSize: 0,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 6,
maxInitialRequests: 4,
automaticNameDelimiter: '~',
automaticNameMaxLength: 30,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
// ...
};
chunks
:这里默认值为async
,只有在异步引入模块的时候才会做分割,所以前面例子中我们将其设置为all
,这样同步异步的引入都会自动的做代码分割了。minSize
:就是说引入的文件多大才会做分割,在src/index.js
中import
引入的header.js
、content.js
等不满足这个条件,所以就没有分割了。minChunks
:我们以引入axios
为例啊,这个就是说最小的引入次数,默认为1,如果你一次都没有,肯定就不会做代码分割了。cacheGroups
: defaultVendors
里面,里面会test校检,像我们的axios
引入就是来自node_modules
包里的,所以就满足就会做分割,打包后为dist/vendors~main.bundle.js
文件,不满足就走下面的default
,我们打包后的文件名也可以通过配置一个filename
来改变名字。缓存组
呢?再举一个例子,比如我们在src/index.js
中import
引入的header.js
、content.js
、foooter.js
这三个文件,当对header.js
做代码分割的时候,走进cacheGroups
中满足default选项,这时候会打包进去并缓存起来,当content.js
进来发现也满足这个条件,所以也会把它丢进去,以此类推,最后打包完成了作为一个文件输出到dist文件中。