webpack 代码分割

793 阅读1分钟

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

demo地址

借鉴视频: B站尚硅谷