Vueコード分割怠け者ローディングの実現方法

2773 ワード
vue コード分割 ローディング
怠惰ロードとは
怠惰負荷は遅延負荷とも言います。必要な時にロードして、それを使ってください。
なぜ怠惰なロードが必要ですか？
一ページの応用において、もし怠惰なローディングが適用されていなかったら、webpackを使って包装したファイルは異常に大きくなり、トップページに入る時にロードすべき内容が多すぎて、延長が長すぎて、ユーザーの体験に不利です。怠惰なローディングを使うとページを分割できます。必要な時にページをロードし、トップページに負担されたローディング圧力を効果的に分担できます。トップページの読み込みを減らす時
どのようにwebpackと組み合わせてコンポーネントの怠惰なロードを実現しますか？
1、webpackプロファイルにおけるoutputパス配置chunkFilename属性

output: {
path: resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: 'chunk[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
chunkFilenameパスはコンポーネントとして怠惰にロードするパスです。
2、webpackのサポートに合わせた非同期荷重方法
  • require（[URL]，reolve）は、良いサポート
    • です。
  • （）=>system.import（URL）は、webpack 2公式サイトでは、徐々に廃止されると発表されています。
    • の使用は推奨されていません。
  • （）=>import（URL）、webpack 2公式サイトで推奨されています。S 7カテゴリーに属しています。babelのsyntax-dynamic-mportプラグインに合わせて使用する必要があります。具体的な使い方は以下の通りです。
    
npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
    
use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
}
}]
    ことばを引く
    webpack>2の時代、vueはコード分割をして怠惰に更にeasyをロードして、loaderを必要としなくて、require.ensureを必要としません。
    importがすべてを解決します。
    階層を分割
    Vueコードの分割怠け者ローディングには以下のいくつかの階層が含まれています。
          1、コンポーネントの階層分割怠け者ローディング
          2、ルート階層
          3、Vuexモジュール
    コンポーネント階層コード分割
    
//    
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//      
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent')
 }
})

//     default     
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
 }
})
    ルート階層コード分割
    
const AsyncComponent= () => import('./AsyncComponent')

new VueRouter({
 routes: [
 { path: '/test', component: AsyncComponent}
 ]
})
    Vuexモジュールコードの分割、vuexには動的登録モジュール方法があり、同時にimportも追加されます。
    
const store = new Vuex.Store()

import('./store/test').then(testModule => {
 store.registerModule('test', testModule)
})
    締め括りをつける
    一般的なプロジェクトでは、routerとcomponentsレベルで分割するか（またはrouter分割のみを使う）だけで十分です。大規模なプロジェクトは三者が全部使うかもしれませんが、使い方は簡単ですよね？
    はい、以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持っています。質問があれば、メッセージを残して交流してください。ありがとうございます。
    • vue-cliに基づいて作成したプロジェクトのディレクトリ構造と説明を紹介します。
    Android AudioManagerを使ってシステムの音量を変更する方法