序文Vue プロジェクトが開発された後、プロジェクトをパッケージ化してリリースする前に、プロジェクトの最適化という重要な操作が行われます。これはプログラマーにとってもプラスになります。この記事の手順に従って、プロジェクトを最適化する方法を確認してください。 1. ルーティングの遅延読み込み1. ルートの遅延読み込みが必要なのはなぜですか?プロジェクトを実行したところ、ページに入るとすぐにすべての js ファイルと css ファイルが読み込まれることがわかりました。このプロセスは非常に時間がかかります。 2. ルートの遅延読み込みを実装する方法Vue 公式ドキュメント: ルーティングの遅延読み込み コードは次のとおりです(例): { パス: '/login', コンポーネント: () => import('@/views/login/index'), 非表示: true }, 3. ルートの遅延読み込みにおけるマジックコメントコメントに webpackChunkName を指定することで、このファイルの名前をカスタマイズできます。 コードは次のとおりです(例): コンポーネント = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue") 2. パッケージサイズを分析する 1. 需要パッケージ化されたファイル内の各ファイルのサイズを知りたいです。コードを分析して最適化できるようにするためです。 2. パッケージ分析ファイルの生成方法ターミナルで npm run preview -- --report を実行します。このコマンドは、エントリ ポイント main.js から依存関係分析を実行し、各パッケージのサイズを分析します。最後に、生成された dist フォルダーに report.html ファイルが生成されます。これを開くと、プロジェクトで使用されているファイルが占めるスペースを確認できます。 3. Webpack構成ではパッケージ化は除外される1. 需要生成されたパッケージ ファイルから、あまり使用されないパッケージを除外します。 たとえば、上図に示す xsxl.js と element.js は、生成されるファイルから除外できます。 2. 包装を除外するvue.config.js を見つけて、次のように外部項目を追加します。 コードは次のとおりです(例): Webpack を構成する: { //シングルページアプリケーションのタイトルを設定します。ページ名: name, 外部: { /** * 外部オブジェクト属性の解析。 * 基本フォーマット: * 「パッケージ名」: 「プロジェクトで導入された名前」 * */ 'vue': 'vue', '要素-ui': 'ElementUI', 'xlsx': 'XLSX' }, 解決する: { エイリアス: { '@': 解決('src') } } } IV. オンラインリソースの引用1. 需要前の手順を実行した後、生成されたパッケージは大幅に小さくなりました。ただし、これらの依存パッケージがないと、プロジェクトをオンラインで実行することはできません。次に、コードの操作をサポートするために、ネットワーク内のリソースを参照する必要があります。 2. CDN
利点:
3. 実装手順注: 開発環境では、ファイル リソースは引き続きローカルの node_modules から取得できますが、プロジェクトがオンラインの場合にのみ外部リソースを使用する必要があります。この時点では、環境変数を使用して区別することができます。詳細は以下の通りです。 コードは次のとおりです(例): vue.config.js ファイル内: 外部を {} にします cdn = { css: [], js: [] } とします。 const isProduction = process.env.NODE_ENV === 'production' // 本番環境かどうかを判定する if (isProduction) { 外部 = { /** * 外部オブジェクト属性分析: * 「パッケージ名」: 「プロジェクトで導入された名前」 */ 'vue': 'vue', '要素-ui': '要素', 'xlsx': 'XLSX' } cdn = { css: [ 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css スタイルシート], js: [ // 最初に vue が必要です。 'https://unpkg.com/[email protected]/dist/vue.js', // vuejs 'https://unpkg.com/element-ui/lib/index.js', // 要素 UI js 'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', // xlsx ] } } webpack 構成外部構成項目 Webpack を構成する: { //シングルページアプリケーションのタイトルを設定します。ページ名: name, 外部: 外部、 解決する: { エイリアス: { '@': 解決('src') } } } html-webpack-plugin 経由で index.html に挿入されます: vue.config.js ファイルで設定します。 チェーンWebpack(config) { config.plugin('preload').tap(() => [ { rel: 'プリロード', ファイルブラックリスト: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], 含める: '初期' } ]) //cdn 変数を挿入します (パッケージ化時に実行されます) config.plugin('html').tap(args => { args[0].cdn = cdn // プラグインにcdnを設定する argsを返す }) // 残りは省略します... } public/index.html を見つけて、CDN Config を設定して css と js を順番に挿入します。 ヘッドの内容を次のように変更します。 <ヘッド> <メタ文字セット="utf-8"> <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= webpackConfig.name %></title> <!-- スタイルをインポート --> <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link rel="スタイルシート" href="<%=css%>"> <% } %> <!-- JS をインポート --> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <script src="<%=js%>"></script> <% } %> </head> 5. console.log をパックして削除する1. 需要プロジェクトがパッケージ化されて起動したら、コード内のすべてのconsole.logを削除します。 2. コードデモンストレーションvue.config.js ファイルで設定します。 コードは次のとおりです(例): チェーンWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true 引数を返す }) } 要約するこれで、Vue プロジェクトの最適化とパッケージ化のフロントエンドに不可欠なボーナス項目に関するこの記事は終了です。Vue プロジェクトの最適化とパッケージ化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: DockerにTomcatコンテナを追加したときにホームページにアクセスできない問題の解決方法
>>: MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明
ある会社の BI 職の面接を受けたとき、面接で SQL に関する質問がありました。一見すると非常に簡...
この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...
目次1. インストール2. プロジェクトにインポートしてマウントする3. 使用Vue2.x はコンポ...
proxy_intercept_errors と recursive_error_pages を使...
序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...
多くのプログラマーは MySQL に精通していると思います。多くの人が count の使い方と、最適...
目次1. 一般的な高階関数1.1、フィルター1.2、地図1.3、減らすHigher Order fu...
1. Windows Server 2019 のインストールVmware に Windows Se...
原因このブログを書いた理由は、今日Leetcodeの日課問題をやっていたからです。文字列を整数(at...
1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...
MySQL クエリ キャッシュはデフォルトでオンになっています。ある程度、クエリの効果は向上しますが...
今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...
Optgroup は、ドロップダウン リストのコンテンツをより整理するために、select タグで使...
コードをコピーコードは次のとおりです。 @文字セット "utf-8"; /* @...
私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...