代码分割的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代码

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('文件加载失败');
});

demo地址

借鉴视频: B站尚硅谷