タグ付けされた質問 「webpack」

私は最近、いくつかのウェブサイト最適化作業に取り組んでおり、次のようなimportステートメントを使用して、webpackでコード分割を使用し始めます。 import(/* webpackChunkName: 'pageB-chunk' */ './pageB') これでpageB-chunk.jsが正しく作成されます。ここで、このチャンクをpageAでプリフェッチしたいとします。これを行うには、次のステートメントをpageAに追加します。 import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB') その結果、 <link rel="prefetch" href="pageB-chunk.js"> HTMLの先頭に追加されると、ブラウザはそれをプリフェッチします。 問題は、私がここで使用するインポートステートメントであり、jsファイルをプリフェッチするだけでなく、jsファイルを評価します。つまり、そのjsファイルのコードが解析されてバイトコードにコンパイルされ、そのJSの最上位コードが実行されます。 これはモバイルデバイスでの非常に時間のかかる操作であり、最適化したいのですが、プリフェッチ部分だけが必要です。評価と実行の部分は必要ありません。後でユーザーインタラクションが発生したときに解析がトリガーされるためです。自分を評価する 私は最初の2つのステップをトリガしたい↑↑↑↑↑↑↑↑、写真から来https://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/ ↑↑↑↑↑↑↑ ↑↑ 確かに私はプリフェッチリンクを自分で追加することでこれを行うことができますが、これはプリフェッチリンクに配置する必要があるURLを知る必要があることを意味します、webpackはこのURLを確実に知っています。 これを達成する簡単な方法はありますか？

9 javascript  webpack  lazy-loading  prefetch 

私は、Vue CLI 3とVuetify 2.1を新しいプロジェクトで使用しています。ようやく動作させた後、variables.scss作成したファイルを変更してプロジェクトを再コンパイルするたびに、コンパイルが完了するまでに5分近くかかることがわかりました。Node。が使用しているメモリを増やすためにpackage.jsonスクリプトを更新してみました。その結果、受け取ったエラーが修正され、コンパイルがクラッシュしましたが、結果としてコンパイル時間が非常に遅くなりました。表示される進行状況（私はForemanを使用して、Rails APIとVueサーバーの両方を同時に実行しています）は次のようになります。 17:47:29 web.1 | <s> [webpack.Progress] 69% building 916/930 modules 14 active /<path/to/app>/frontend/node_modules/css-loader/index.js??ref--9-oneOf-3-1!/<path/to/app>/frontend/node_modules/postcss-loader/src/index.js??ref--9-oneOf-3-2!/<path/to/app>/frontend/node_modules/sass-loader/lib/loader.js??ref--9-oneOf-3-3!/<path/to/app>/frontend/node_modules/vuetify/src/components/VSwitch/VSwitch.sass これらの進行状況は、前述のように、最終的に完了する前に約5分間読み込まれます。私の推測では、変数を更新したため、Vuetify node_module内のその変数の各コンポーネントとインスタンスについて、スタイルを確認して更新する必要があります。 私の質問は、これをスピードアップする方法があるかどうかです。たぶん私はこの問題を引き起こした間違った設定をしましたか？それともこれは完全に正常であり、私はそれに対処する必要がありますか？ main.js import Vue from 'vue'; import App from './App.vue'; import { router } from './router'; import store from './_store'; import vuetify from './plugins/vuetify'; Vue.config.productionTip = false; new Vue({ router, store, …

9 webpack  vuetify.js  vue-cli 

ASP.Net Core React + Reduxを使用してSPA Webアプリケーションを開発しています。 .Net Core 3.0に更新した後、UseWebpackDevMiddlewareとAddNodeServicesが廃止されていることがわかりました。 新しいプロジェクトテンプレートReact + Reduxを学びましたが、webpackやSSRを使用していません。 1）.Net Core 3.0のwebpackの使用例や情報はどこにありますか？UseWebpackDevMiddlewareを使用すると、HMRとWebpackビルドを非常に簡単に構成できました。 2）.Net 3.0 + Reactを使用したSSRの例や情報はどこにありますか？

9 webpack  server-side-rendering  .net-core-3.0  asp.net-core-3.0 

質問1 私は、彼らはすべてのヘルパー（等で、具体的には、（WebPACKの）バンドル（出力）結果には多くの不必要な重複があることがわかりclassCheck、objectSpread）によるオブジェクト広がりプラグインへ（。 だから、重複を減らしたい。ライブラリの場合、確かに、transform-runtimeプラグイン（を参照runtime-corejs3）を使用してこれを行います。しかし、これはアプリケーションなので、これを行う正しい方法は何ですか？ そのため、transfrom-runtimeプラグインがライブラリに推奨されているため（そして全体の削減のために、つまりヘルパーなど）core-js、混乱していますregenerator。しかし、ここでは、ヘルパーの重複を減らしたいだけです。他の重複ではなく、それがによって行われているためです。babel/env だからここで私が聞きたい/議論したい質問は、もしそうならhelpers、アプリケーションの重複を減らす必要があるということです、そしてどのように？ 質問2 他の質問があり、core-js/modules/es.promise.jsかつ core-js-pure/modules/es.promise.js、正確に同じコードしている、主な違いは、単に前者はグローバルな環境汚染を持っているということでしょうか？もしそうなら、なぜポリフィルにcore-js使用（直接インポート）core-js-pureしてからグローバルに追加しないのですか？IMO、これは重複を大幅に削減します。現在ライブラリはtransform-runtime（最終的にcore-js-pure）使用しますが、アプリはpreset-env（最終的にcore-js）使用するため、アプリとライブラリの間で共有/共有可能なコードはありませんよね？

8 javascript  webpack  babeljs 

私はwebpack-dev-serverDockerコンテナー内でNestjsアプリケーションを実行するために使用しています。すべてが稼働していますが、VS Codeインスタンスからアプリケーションをデバッグできません。私はこの設定を使用して9229ポートを公開しようとしていますwebpack.config.js： devServer: { host: '0.0.0.0', port: 9229, }, netstat -lコンテナー内で実行すると、ノードが9229ポートをリッスンしていないことがわかります。 Dockerfileおよびdocker-composeファイルでポート9229を公開しています。Dockerfile： FROM node:12.16.1-alpine WORKDIR /usr/src/app COPY package.json yarn.lock ./ RUN yarn COPY . . EXPOSE 3000 EXPOSE 9229 CMD [ "yarn", "run", "start:debug"] そしてdocker-compose.ymlファイル： version: '3.7' services: open-tuna-api: image: opentunaapi ports: - 3000:3000 - 9229:9229 volumes: - ./dist:/usr/src/app/dist - …

8 node.js  docker  webpack  webpack-dev-server  nestjs 

私使用していますが、コンポーネント遅延ロードとしてのWebPACKを使用してルータに反応バンドラ私がホームページにアクセスすると、/ 私はそれをネットワーク]タブで見ることができる bundle.jsロードされ、また、私は、サイドバーの対応コンポーネントで特定のアイテムをクリックしたときたとえば0.bundle.js、ファイル名が正常に読み込まれますが、検索バーからネストされたルート（例http://127.0.0.1:8080/forms/select）に直接移動すると、次のようなエラーが発生します。 GET http://127.0.0.1:8080/forms/bundle.jsnet :: ERR_ABORTED 404（見つかりません） このエラーは、bundle.jsがロードされていないことを示しています。つまり、他のチャンクをロードできません。 webpack.config.js const webpack = require('webpack'); module.exports = { entry: './src/index.js', module: { rules: [], }, resolve: { extensions: ['*', '.js', '.jsx'], }, output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js', }, plugins: [new webpack.HotModuleReplacementPlugin()], devtool: 'cheap-module-eval-source-map', devServer: { contentBase: …

8 javascript  reactjs  webpack  react-router  lazy-loading 

Gatsbyで本番用アプリをビルドすると、次のようになります。 window.___chunkMapping={ "app":[], "component---src-templates-page-tsx":[], "component---src-templates-pages-newsletter-tsx":[] } これらのパスを印刷する代わりにハッシュ化することは可能ですか？背後で起こっていることからあまり露出したくないのです。 私はこれらの設定をwebpackで設定してみました： output: { filename: `[chunkhash:2][contenthash:5].js`, chunkFilename: `[chunkhash:2][contenthash:5].js`, }, また、.jsファイルは正常にハッシュされますが、テンプレートパスはハッシュされません。

8 javascript  node.js  webpack  gatsby