Webpack エクスペリエンスの共有

webpack はモジュール バンドラーです。その主な目的は JavaScript ファイルを一緒にパッケージ化することです。パッケージ化されたファイルはブラウザで使用されますが、この記事では主に Webpack について説明します。

キャッシュ

キャッシュ用に max-age + cdn を組み合わせたファイル名 [name].[contenthash:8].js を生成します。 [name].[contenthash:8].js，结合 max-age + cdn 做缓存。

网页加载

html

以前是固定的一个 html， html -》版本号 js 文件（通过webpack打出来的）-》通过版本号确定具体 js。（现在想想不太合理，虽然没和后台耦合这么重）

现在是变动的 html，通过 HtmlWebpackPlugin 打出来（webpack 生成，里面包含版本号的 js）

这样还省了一个串行时间（拉版本号文件）。 同时也便于做灰度，比如发布了需求，让一部分用户先体验，动态打出 html 给到后台即可。（固定 html 则没这么轻松做）

css分离

在观麦，css变动会非常的少，这得益于 react-gm 对类名的完善。 既然变动少，把 css 单独出来也不错，使用 ExtractTextPlugin 分离 css。

分离后减少 js 大小，不阻塞 js，同时 css 和 js 可同时拉取。

common

new CommonsChunkPlugin({name: 'commons'})

看打包后的 common 代码，会发现其他模块的id和hash都会打在common中，这样每次 commons 文件都会变，就很难做缓存了。

提供两个文件列表即可，会发现 webpack 吧 id 和 hash 打在 manifest 文件中。这样commons就可以缓存了。btw，没看到官网有介绍，看到的说声。

new CommonsChunkPlugin({names: ['commons', 'manifest']})

本地开发

讲讲代理，本地开始是自己起的服务，没有后台服务，自然需要代理到某个地方。 可通过 devServer.proxy 。也可代理到外网排查 bug，都是源码，查 bug 非常快。

"proxy": {
    "/ticket/*": {
      "target": "http://dev.guanmai.cn:7413",
      "changeOrigin": true
    }
}

打包速度

DllPlugin

当项目大了后，必然需要打很多包，导致打包时间非常长。 官方推荐做法是把不常变动的文件打DLL。

我们工程就把  react react-dom prop-types classnames mobx mobx-react lodash moment big.js 等打进来。

网上资料都介绍 dll 的 文件名是 [name]_[hash].dll.js, 我们是 [npm version]_dll.js npm version

Web ページの読み込み

html

は、以前は固定 HTML、html -> バージョン番号 js ファイル (webpack を通じて入力) -> バージョン番号によって特定の js を決定していました。 (今考えると意味がありませんが、バックエンドとそれほど密接に連携しているわけではありませんが)

これで、HtmlWebpackPlugin (webpack によって生成され、バージョン番号付きの js が含まれる) を通じて入力された、変更された HTML になります。 )

これにより、シリアル時間 (プル バージョン番号ファイル) も節約されます。 同時に、グレースケールを実行することも便利です。たとえば、要件を公開する場合、最初に一部のユーザーに体験させてから、HTML を動的に入力してバックグラウンドに送信します。 (HTMLの修正はそう簡単ではありません)

CSSの分離

Guanmaiでは、react-gmによるクラス名の改善のおかげで、CSSの変更は非常に少なくなります。 変更点が少ないのでCSSを分離してExtractTextPluginを使ってCSSを分離するのも悪くありません。

分離後、jsのサイズが小さくなり、jsがブロックされなくなります。同時に、cssとjsを同時に引っ張ることができます。

common

rrreee

パッケージ化された共通コードを見ると、他のモジュールのIDとハッシュが共通に型付けされるため、その都度コモンズファイルが変わり、キャッシュするのが難しくなります。

2 つのファイル リストを指定するだけで、webpack がマニフェスト ファイルに ID とハッシュを設定することがわかります。このようにしてコモンをキャッシュできます。ちなみに公式サイトには紹介がなかったので、知っていたら教えてください。

rrreee

ローカル開発

エージェントについて話しましょう。 devServer.proxy 経由で利用可能です。エージェントを使用して外部ネットワークにアクセスしてバグをチェックすることもできます。これはすべてソースコードであるため、バグチェックは非常に高速です。

rrreee

パッケージ化の速度

DllPlugin

プロジェクトが大きくなると、必然的に多くのパッケージが必要となり、パッケージ化に非常に長い時間がかかります。 公式に推奨されているアプローチは、頻繁に変更されないファイルを DLL に作成することです。

私たちのプロジェクトは react react-dom prop-types classnames mobx mobx-react lodash moment big.js が届くまで待ちます。

オンライン情報では、dll のファイル名は [名前]_[ハッシュ].dll.js であると紹介されています。[npm バージョン]_dll.js npm バージョン を package.json バージョンから読み取ります。

なぜnpmバージョンではなくハッシュを使用しないのでしょうか?二次パッケージ化を検討しているときに問題が発生しました。DLL を再パッケージ化する必要があるかどうかを判断する方法は?ハッシュの場合はどうすればよいですか (解決策を推奨してください)。 npm バージョンを使用している場合、バージョンが変更されるとすぐに再パッケージ化されます。たとえば、react がアップグレードされた場合は、バージョン + を取得して再パッケージ化します。

happypack

happypack はビルドの速度を大幅に向上させ、複数のスレッドにパッケージ化することができ、キャッシュによりリビルドも高速化されます。

devtool

開発用の評価、本番用のソースマップ（許容範囲内で表示の問題、パッケージング速度の犠牲などのトラブルシューティングに使用されます）

babel-loader

cacheDirectoryを覚えてください

noParseとエイリアス

一部のライブラリ必須ではないため、noParse 構成は解析されず、エイリアスは x.min.js ファイルを指します。

木揺れ

はまだ使用されておらず、まだ適切な時期ではないように感じます。良い記事がありました。 Compression

UglifyJsPlugin 最初は、webpack.optimize.UglifyJsPlugin をベースにしていました。 uglify-js@2.x で。

🎜現在、webpack が別途登場しており、キャッシュのサポートやマルチコア圧縮など、さらに多くの機能を備えています。試してみましたが、非常に高速でした。 webpack.optimize.UglifyJsPlugin は実際には uglifyjs-webpack-plugin です。 🎜🎜私にとって不思議なのは、これが公式には uglify-es に基づいているということです。ただし、依存関係は依然として uglify-js だと思います。奇妙さ。 🎜🎜UglifyJsParallelPlugin🎜🎜正式リリース前はマルチコア対応の webpack-uglify-Parallel を使用していました。速度はuglifyjs-webpack-pluginとあまり変わりません。 🎜🎜記事を書くときにgithubを覗いてみたら7月に廃止されて公式サイトに統合されていました。 🎜🎜その他🎜🎜 babel の babel-minify-webpack-plugin は傍観してください。 🎜🎜スクリプト cdn🎜🎜一部の js (gm-fetch babel-polyfill) にはほとんど変更がありません。webpack でパッキングするのは少し無駄です。cdn 経由で取得して、スクリプト形式で HTML ドキュメントに組み込むことができます。 🎜🎜分析🎜🎜チャートと非常に直感的な分析があります。私はそのほうが好きです。 🎜webpack-monitor🎜🎜古いものは webpack-bundle-analyzer です🎜🎜関連する推奨事項: 🎜🎜🎜webpack を使用してフロントエンド プロジェクトを構築するための Web サンプル コード🎜🎜🎜🎜 webpack 構成方法の概要🎜🎜

node.jsのnpmとwebpackの設定方法を詳しく解説

以上がWebpack エクスペリエンスの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。