Webpack手触り学習シリーズのwebpack 5の認識と変化

7075 ワード
Gulp Webpack webpack 手触り学習シリーズ webpack5 の認識と変化
一、webpack 5の紹介とダウンロード
  • webpack 5は、永続的なキャッシュによって構築性能を向上させる.
  • webpack 5より良いアルゴリズムとデフォルト値を使用して、長期キャッシュを改善します.
  • webpack 5は、より良い木揺れとコード生成によってバンドルパケットサイズを改善する.
  • webpack 5は、奇妙な状態にある内部構造を除去するとともに、v4において重大な変更を導入することなく機能を実現する.
  • webpack 5は、重大な変更を導入することによって、将来の機能を準備し、v5をできるだけ長く使用することができます.
  • webpack 5のダウンロードはnpm i webpack@next webpack-cli -Dコマンドでダウンロードできます.

    • 二、webpack 5の変化
  • Nodeを自動的に削除します.js Polyfills
  • の初期、webpackの目標はブラウザで多くのnode.jsモジュールを実行することを許可することだったが、モジュール構造が変化し、多くのモジュールの用途は現在、主にフロントエンドの目的のために作成されている.webpack <= 4には多くのnode.jsコアモジュールのpolyfillが付属しており、モジュールが任意のコアモジュール(すなわちcryptoモジュール)を使用すると、これらのモジュールは自動的に適用される.
  • は、node.jsとして記述されたモジュールの使用を容易にするが、これらの巨大なpolyfillをパケットに追加する.多くの場合、これらのpolyfillは不要である.
  • webpack 5は、これらのコアモジュールの充填を自動的に停止し、フロントエンドと互換性のあるモジュールに集中します.
  • は移行し、できるだけフロントエンドと互換性のあるモジュールを使用しようとし、node.jsコアモジュールにpolyfillとエラーメッセージを手動で追加すると、ターゲットの実現方法を示すことができます.
  • ChunkおよびモジュールID
  • は、長期キャッシュのための新しいアルゴリズムを追加し、本番モードではデフォルトでこれらの機能を有効にします.chunkIds: "deterministic", moduleIds: "deterministic"
    • です.
  • Chunk ID
  • 開発環境でimport(/* webpackChunkName: "name" */ "module")の名前を付ける必要はありません.生産環境には
    • が必要です.
  • chunk内部にはwebpack命名規則があり、chunk命名
    • ではない.
  • Tree Shaking
  • id(0, 1, 2)は現在、ネストモジュールに対するwebpackを処理することができ、生産環境では、tree shakingモジュールが露出するinnerが削除され、コードは以下の通りである:
    // inner.js
export const a = 1;
export const b = 2;

// module.js
import * as inner from './inner';
export {
        inner };

// user.js
import * as module from './module';
console.log(module.inner.a);
    • .
  • bは現在、複数のモジュールの前の関係が可能であり、webpackが設置されている場合、"sideEffects": falseメソッドが使用されていないことが発見されると、testだけでなく、testも削除され、コードは以下の通りである:
    import {
        something } from './something';

function usingSomething() {
       
  return something;
}

export function test() {
       
  return usingSomething();
}
    • .
  • "./something"は、現在、webpackに対するCommonjs
    • を処理することができる.
  • Output
  • tree shakingデフォルトではwebpack 4コード
    • しか出力できません.
  • ES5は、webpack 5およびoutput.ecmaVersionコード、例えばES5
    • を生成することができる属性ES6 / ES2015の追加を開始する.
  • SplitChunk
  • output.ecmaVersion: 2015、コードは以下の通り:
    minSize: 30000;
  • webpack4、コードは以下の通り:
    minSize: {
       
  javascript: 30000,
  style: 50000,
}
  • Caching
  • キャッシュはwebpack5に格納され、コードは以下の通りである:
    //     
cache: {
       
  //     
  type: "filesystem",
  buildDependencies: {
       
    //       ，    
    config: [__filename]
  }
}
  • 監視出力ファイル
  • より前のnode_modules/.cache/webpackは、常に1回目の構築時に全てのファイルを出力していたが、再構築監視時には修正したファイル
    • のみが更新.
  • 今回の更新は、初回構築時に出力ファイルが変化するかどうかを確認し、全ファイル
    • を出力かどうかを決定する.
  • デフォルト
  • webpack
  • entry: "./src/index.js
  • output.path: path.resolve(__dirname, "dist")
  • より多くの内容、output.filename: "[name].js"
    • を見ることができます
    AndroidQ対応 通信系の不具合
    TWA(Trusted Web Activity) で任意のページを表示させる