code split : 代码分割,会将代码分离到不同的bundle中,然后进行按需加载这些文件,不做代码分割就把所有js代码内容打包到一个文件中,这个文件非常的大,影响加载速度。
代码分割的3种方式
1.多入口
多入口:有多个入口,最终输出就有多个bundle 适用于多页面
在webpack.config.js的entry配置多入口
entry: {
// 多入口配置
main: './src/js/index.js',
test: './src/js/test.js'
},
output:{
// [name]: 取文件名 入口名 main|test 输出打包的文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'built')
},
2.optimization
webpack 中 optimization配置 还可以 将node_modules中代码单独打包一个chunk最终输出,如果是多入口,可以 自动分析多入口chunk中,有没有公共的文件。如果有会打包成单独一个chunk
optimization:
-
可以将node_modules中代码单独打包一个chunk最终输出
-
自动分析多入口chunk中,有没有公共的文件(文件不可太小).如果有会打包成单独一个chunk
webpack.config.js配置
optimization: {
splitChunks: {
chunks: 'all'
}
},
单入口
多入口
3.通过js代码
通过js代码,让某个文件被单独打包成一个chunk import动态导入语法,能将某个文件单独打包 src/js//index.js
import(/* webpackChunkName: 'test' */'./test').then(({ mul, count }) => {
// 文件加载成功
// eslint-disable-next-line
console.log(mul(2, 3));
// eslint-disable-next-line
console.log(count(2, 4));
}).catch(() => {
// eslint-disable-next-line
console.log('文件加载失败');
});
借鉴视频: B站尚硅谷