3

Normally in Laravel Mix, we can extract all vendors automatically using mix.extract() or extract a list of vendors using mix.extract(['vue','lodash','axios']). Is there a way to extract all vendors except a few?

For example, I load Pusher, Echo, Chart.js, etc. when they're needed importing dynamic chunks. However, they're still getting added to my vendor.js file.

Also, when extracting a list of specific vendors, I end up with about 20 extra chunks due to sharing common code with names like vendors~js/mychunk1~js/mychunk2~js/mychunk3.

4

2 に答える 2

3

Laravel Mix 内の Extract.js コンポーネントに console.log を挿入すると、現在の設定では、プラグインがこれらの行を Webpack 構成の最適化フィールドに挿入しているだけであることがわかりました。

optimization: {
  runtimeChunk: { name: '/js/manifest' },
  splitChunks: {
    cacheGroups: {},
    chunks: 'all',
    name: '/js/vendor',
  },
},

vendor ファイル内で何が起こっているかをフィルタリングするために、次のように splitChunks を編集する必要がありました。

splitChunks: {
  cacheGroups: {
    vendor: {
      // moved name and chunks here
      name: 'js/vendor',
      chunks: 'all',
        // you can pass a RegExp to test, but also a function
        test(module/* , chunk */) {
          if (module.context) {
            // node_modules are needed
            const isNodeModule = module.context.includes('node_modules');
            // but only specific node_modules
            const nodesToBundle = [
             'vue',
             'lodash',
             'axios',
            ].some(str => module.context.includes(str));
            if (isNodeModule && nodesToBundle) {
              return true;
            }
         }
         return false;
       },
     }
  },
  // removed name and chunks from here  
  // chunks: 'all',
  // name: '/js/vendor',
},

これらの変更の後、私はまだあなたが経験している奇妙な命名をしていましたが、このGitHub リポジトリのおかげで、次を追加することでこの動作を削除できることがわかりました:

default: false, // disable default groups
vendors: false, // disable vendors group

CacheGroups フィールドに。

したがって、私の完全な webpackConfig 関数の引数は次のとおりです。

.webpackConfig({
  output: {
    // with other settings
  },
  optimization: {
    runtimeChunk: { name: '/js/manifest' },
    splitChunks: {
      cacheGroups: {
        default: false,
        vendors: false,
        vendor: {
          name: 'js/vendor',
          chunks: 'all',
          // you can pass a RegExp to test, but also a function
          test(module/* , chunk */) {
            if (module.context) {
              // node_modules are needed
              const isNodeModule = module.context.includes('node_modules');
              // but only specific node_modules
              const nodesToBundle = [
                'vue',
                'lodash',
                'axios',
              ].some(str => module.context.includes(str));
              if (isNodeModule && nodesToBundle) {
                return true;
              }
           }
           return false;
         },
       }
     },
   },
 }
})

mix ファイルの extract() 呼び出しも必ず削除してください。

于 2020-09-24T10:17:28.770 に答える
0

2022 年 1 月の更新

Laravel Mix v6 (2020 年 12 月 21 日リリース) から、複数のベンダー ファイルを持つことができます。

mix.extract(['vue','lodash','axios'], 'vendor-main.js');
mix.extract(); // everything else

これらは、必要に応じて webpack によって自動的に読み込まれます。

を使用しwebpack.IgnorePluginて、最終ビルドからパッケージを明確に削除することもできます。

const webpack = require('webpack')
mix.webpackConfig({
    optimization: {
        splitChunks: {chunks: 'all'}
    },
    plugins: [
        // Ignore unnecessary package modules
        new webpack.IgnorePlugin({
            resourceRegExp: /^\.\/locale$/,
            contextRegExp: /moment$/,
        })
    ]
});
于 2022-01-21T08:27:31.787 に答える