今回はvue-cliの読み込み時間を最適化する方法についてお届けします。vue-cliの読み込み時間を最適化するための注意事項は次のとおりです。私の最近のインターンシップの
プロジェクト要件には多くの要件がなかったので、プロジェクトの最適化について学びました。主な理由は、最初の画面の読み込みが遅すぎることでした。
大きなファイルの検索Webpack 視覚化プラグイン Webpack Bundle Analyzer
を使用して、プロジェクトの js ファイル サイズを表示し、大きすぎる js ファイルを意図的に解決できます。
Webpack Bundle Analyzer
查看工程js文件大小,然后有目的的解决过大的js文件。
npm install --save-dev webpack-bundle-analyzer
在webpack中设置如下,然后npm run dev
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
import index from '@/components/index' const index = r => require.ensure( [], () => r (require('@/components/index'),'index')) //如果写了第二个参数,就打包到该`/JS/index` 的文件中。 //不写第二个参数,就直接打包在`/JS` 目录下。 const index = r => require.ensure( [], () => r (require('@/components/index')))
JS ファイルはオンデマンドで読み込まれます
この設定をしないと、プロジェクトの最初の画面を読み込むときに Web サイト全体のすべての JS ファイルが読み込まれるため、JS ファイルを分離してページを読み込むときに、ページをクリックすると JS は優れた最適化方法です。 ここで使用されているのは、vue コンポーネントの遅延読み込みです。 router.js では、コンポーネントの導入に import メソッドを使用せず、require.ensure を使用します。
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios' }
パッケージング時にcdn
を使用する場合は、vue、vuex、vue-router、axios等を国産bootcdnに置き換えて、ルートディレクトリのindex.htmlに直接導入してください。 Webpack設定に外部を追加し、パッケージ化する必要のないライブラリを無視します。 <script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
var HtmlWebpackPlugin = require('html-webpack-plugin'); new HtmlWebpackPlugin({ inject: 'body', })
デフォルトでは、ビルド後のindex.htmlでは、headerにjsが導入されています。 html-webpack-plugin プラグインを使用して、inject の値を body に変更します。 jsの紹介文を本文の最後に置くことができます。
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, pure_funcs: ['console.log'] }, sourceMap: false })
コードを圧縮してコンソールを削除
UglifyJsPlugin プラグインを使用してコードを圧縮し、コンソールを削除します。 rrreeeこの記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
以上がvue-cli は読み込み時間を最適化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。