webpack中分割代码的三种方式

官网教程：code-splitting

最近在开发一个新的功能，需要在某一条件下引入新包，而之前的场景则完全不需要。这种情况下，动态加载+代码分割正可以派上用场。在动手之前，先看看官网是怎么说的吧。

entry - 配置多入口、多页面

在entry对象中写入多个入口文件即可。

weboack.config.js

const path = require('path');

module.exports = {
   
   
  mode: 'development',
  entry: {
   
   
    index: './src/index.js',
    another: './src/another-module.js',
  },
  output: {
   
   
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这样做的弊端主要由两个。第一，如果有公共的代码块，那么打包之后的两个Bundle里都会包含重复的模块。第二，不够灵活，不能被webpack通过splitChunks的规则灵活地优化。

因此，在entry里直接写多个入口的方式，适用于本身就是多入口的项目，而非一般的spa。可以通过代码结构，用函数构造出合理的entry和相应的htmlwebpackplugin，来进行打包。

splitChunks - 智能抽取公共代码

webpack还给出了智能分割代码的功能：splitChunks，可以用给定的策略去抽取公共代码，避免重复。

webpack.config.js

 optimization: {
   
   
    minimizer: [
      new UglifyJsPlugin({
   
   
        exclude: /\.min\.js$/, // 过滤掉以".min.js"结尾的文件，这个后缀本身就是已经压缩好的代码，没必要进行二次压缩