webpack优化代码运行之Code split

一、 什么是code split

Webpack的code split是一种技术，它能够将代码分割成多个块，从而优化应用程序的性能。这样做可以实现按需加载和并行加载，从而减少初始化时间和请求次数。Code split在Webpack中通过使用entry语法和各种Loader和插件来实现，可以将代码分割成多个文件，然后在需要时加载它们。它可以适用于任何类型和大小的应用程序，尤其适合大型单页应用和跨页面共享代码的应用程序。

二、code split 打包多入口文件

webpack的code split可以通过在webpack.config.js配置文件中设置entry和output来实现。entry指定入口文件，可以通过设置多个entry来实现code split。output则指定输出文件名和输出目录。

例如，我们可以在webpack.config.js中设置多个entry，如下所示：

entry: {
  app: './src/app.js',
  vendor: ['react', 'react-dom', 'lodash'],
  polyfills: './src/polyfills.js'
},

其中，app是我们应用程序的入口，vendor包含了我们使用的第三方库，polyfills包含了需要兼容旧浏览器的代码。

接着，在output中，我们可以使用占位符来设置文件名：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[chunkhash].js'
}

其中，name指entry的键名，chunkhash表示根据文件内容生成的哈希字符串，可以保证文件名的唯一性。

最终，我们的应用程序会被分成多个小的JavaScript文件，例如：

• app.1a2b3c.js
• vendor.4d5e6f.js
• polyfills.7g8h9i.js

这样可以有效地缩短页面加载时间和提高应用程序的性能。

三、code split 提取公共代码

Webpack的Code Split技术可以帮助我们提取公共代码，减少页面的加载时间，提高页面的性能。下面我举一个例子来说明如何使用Webpack的Code Split技术提取公共代码。

假设我们有一个应用程序，其中包含两个页面：首页和用户页面。我们想要提取公共代码以减少页面的下载时间。为此，我们可以使用Webpack的多个入口特性，其中每个入口都是一个单独的JavaScript文件。

首先，在我们的Webpack配置文件中，定义两个入口文件，如下所示：

entry: {
  home: './src/home.js',
  user: './src/user.js'
}

然后，我们可以在每个入口文件中使用Webpack的动态导入技术来加载共享模块。这里，我们使用import()函数来导入一个包含公共代码的JavaScript文件：

// home.js
import(/* webpackChunkName: "common" */ './common.js').then(common => {
  console.log(common.foo());
});

// user.js
import(/* webpackChunkName: "common" */ './common.js').then(common => {
  console.log(common.bar());
});

在这里，我们使用了webpackChunkName选项来给加载的公共代码 chunk 命名（这里命名为 common）。这个命名选项对代码拆分起着重要的作用，因为它使得Webpack可以创建一个独立的chunk包，其中包含所有的公共模块。

最后，我们需要在Webpack的配置文件（比如output选项中）中配置Chunk文件的输出路径和名称。我们可以使用Webpack的[name]变量来指定Chunk文件的名称，如下所示：

output: {
  filename: '[name].[chunkhash].js',
  chunkFilename: '[name].[chunkhash].js',
  ...
}

在这里，我们配置了Webpack的输出路径和文件名，使用[name]变量来指定Chunk的名称。这意味着，生成的Chunk文件分别为home.common.js和user.common.js（如果我们在之前的代码中使用了不同的名称，则Chunk文件的名称也相应发生更改）。

通过这种方式，我们可以在Webpack中实现Code Split技术，将公共模块提取出来并将它们放在一个独立的Chunk文件中，从而提高页面性能和用户体验。

四. code split 实现按需加载

Webpack的Code Split技术可以将一个大型的应用程序代码拆分成更小的代码块，以便按需加载。这样可以提高应用程序的性能和用户体验，因为只有在需要时才会加载所需的代码。以下是实现按需加载的步骤：

1. 定义入口文件和输出文件

在webpack配置文件中，需要定义应用程序的入口文件和输出文件。例如，定义入口文件为app.js，输出文件为bundle.js。

entry: {
  app: './app.js'
},
output: {
  filename: 'bundle.js'
}

2. 使用webpack的splitChunks配置项

使用webpack的splitChunks配置项来将应用程序代码拆分成更小的代码块。可以根据模块的大小、共享依赖项或按需加载等条件来进行拆分。例如，使用以下配置将共享依赖项打包到一个名为vendors的代码块中。

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

3. 在应用程序中按需加载代码

可以使用webpack的动态import语法来按需加载代码块。例如，以下代码将异步加载名为lazyModule的代码块。

import('./lazyModule')
  .then(module => {
    // 模块加载完成后的操作
  })
  .catch(error => {
    // 模块加载失败的处理
  });

举例说明：

假设我们有一个应用程序，其中包含三个页面，每个页面都有自己的代码。我们可以将代码拆分成三个代码块，以便按需加载。每个页面的代码可以使用动态import语法按需加载。

entry: {
  home: './home.js',
  about: './about.js',
  contact: './contact.js'
},
output: {
  filename: '[name].bundle.js',
  path: __dirname + '/dist'
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

现在，在我们的应用程序中，可以使用动态import语法来按需加载每个页面的代码。

// 加载home页面代码
import('./home')
  .then(module => {
    // 模块加载完成后的操作
  })
  .catch(error => {
    // 模块加载失败的处理
  });

// 加载about页面代码
import('./about')
  .then(module => {
    // 模块加载完成后的操作
  })
  .catch(error => {
    // 模块加载失败的处理
  });

// 加载contact页面代码
import('./contact')
  .then(module => {
    // 模块加载完成后的操作
  })
  .catch(error => {
    // 模块加载失败的处理
  });

通过按需加载，我们可以提高页面加载速度和用户体验。只有在需要时才会加载代码，这可以减少初始加载时间和带宽消耗。

五、按需加载eslint校验报错解决方案

如图：

在编译时，eslint会校验import语法

解决方案1：

1. 下载

npm i eslint-plugin-import -D

2. 配置.eslintrc.js

plugins: [“import”]

• eslintrc.js

module.exports = {
 // 继承 Eslint 规则
 extends: ["eslint:recommended"],
 env: {
   node: true, // 启用node中全局变量
   browser: true, // 启用浏览器中全局变量
 },
 plugins: ["import"], // 解决动态导入import语法报错问题 --> 实际使用eslint-plugin-import的规则解决的
 parserOptions: {
   ecmaVersion: 6,
   sourceType: "module",
 },
 rules: {
   "no-var": 2, // 不能使用 var 定义变量
 },
};

解决方案2：
可以在package.json文件中加上如下配置

• package.json

"eslintConfig": {
    "parser": "babel-eslint",// 解析器，默认使用Espree
    "parserOptions": {
      "sourceType": "module", // 指定来源的类型，"script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
      "allowImportExportEverywhere": true // 不限制eslint对import使用位置
    }
  },

我后面更改打包文件名时报了个错,在这里记录一下

这个就是webpack版本不匹配导致的，我现在的版本是5.85.1
然后我降到5.72.0就好了