webpackのコード分割（コード分割）

（1）背景

プロジェクトでは、通常、loadsh、element-ui、axiosなどのプラグインを使用します。操作が実行されない場合、これらの[プラグイン]と[ビジネスロジックコード]はjsファイル（メイン）にパッケージ化されます。 js）

index.js：

import { flatten }  from './number'
var arr = [1, 2, [3, 4, [5, 6]]]
var result = flatten(arr)
console.log(result)

number.js

const lodash = require('lodash')
export function flatten (arr) {
  return lodash.flatten(arr)
}

パッキング結果：

プラグインが1kbの場合、ビジネスロジックコードは1Kbで、ビジネスコードを1回変更し、1回再パッケージし、ビジネスコードを1回変更し、1回再パッケージすると、各パッケージは2KBになります。コード分割方式を採用する場合は、プラグインをjsにパッケージ化します。、ビジネスロジックコードはjsにパッケージ化されます。ビジネスロジックコードが変更されるたびに、ビジネスロジックjsのみがパッケージ化されます。これは1Kbのみであり、パッケージ化の時間を節約します。これがコード分割の主な意味です。

主なアプローチは、lodashを個別にパッケージ化することです

webpack.config.js：

entry: {
    main: './src/main.js',
    lodash: './src/lodash.js'
  },

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

ベール：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack test</title>
</head>

<body>
  <div id="app"></div>
  <script src="main.381b139bf6332969bc3e.js"></script>
  <script src="lodash.381b139bf6332969bc3e.js"></script>
</body>

</html>

2つのjsファイルがindex.htmlに導入されています

（2）webpackを使用してコード分割を構成します

2行のコードを追加します

optimization: {
    usedExports: true,
    // 代码分割
    splitChunks: {
      chunks: 'all'
    }
  },

パッケージング後：

index.html：

main.269e60289818f70af114.js：このjsは主にビジネスロジックコードです

vendors〜main.269e60289818f70af114.js：このファイルは主にプラグインのjsコレクションコードです

webpackのコード分割（コード分割）

おすすめ