webpack5 学习（十）—— 代码分离

＊且听风吟

已于 2022-03-04 18:07:40 修改

阅读量1.1k

点赞数 3

分类专栏： webpack 文章标签：学习 webpack json

于 2022-03-04 18:05:32 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/123212319

版权

本文详细介绍了webpack5中的代码分离技术，包括入口起点、防止重复、动态导入、预获取/预加载模块，以及如何利用SplitChunksPlugin优化公共模块。通过合理使用这些方法，可以实现更小的bundle，控制加载优先级，提高应用性能。

摘要由CSDN通过智能技术生成

代码分离是 webpack 中最引人注目的特性之一。

此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。

代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。

常用的代码分离方法有三种：

入口起点：使用 entry配置手动地分离代码。
防止重复：使用 Entry dependencies或者 SplitChunksPlugin 去重和分离 chunk。
动态导入：通过模块的内联函数调用来分离代码。

入口起点(entry point)

another-module.js

新建文件another-module.js：

import _ from 'lodash';

console.log(_.join(['Another', 'module', 'loaded!'], 'console.log'));

index.js：

import _ from 'lodash';

function component () {
   
  const element = document.createElement('div');
  const btn = document.createElement('button')

  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  btn.innerHTML = 'Let click it!'

  element.appendChild(btn)

  return element;
}

document.body.appendChild(component());

此时项目结构：

webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
  |- another-module.js
|- /node_modules

修改webpack.config.js：

const path = require('path')

module.exports = {
   
  mode: 'development',
  entry: {
   
    index: './src/index.js',
    another: './src/another-module.js',
  },
  output: {
   
    filename: