importとrequireの違い
ノードプログラミングで最も重要なアイデアはモジュール性です。インポートとrequireの両方がモジュール性によって使用されます。
仕様に従う
必要があり
ますAMD仕様の導入方法インポートはes6の構文標準です。ブラウザとの互換性が必要な場合は、es5の構文に変換する必要があります。
呼び出し時間
requireは実行時に呼び出されるため、理論的にはrequireコード内のどこでも使用できます。
インポートはコンパイルされます。ファイルの先頭に配置する必要があります。
基本的に
requireは割り当てプロセスです。実際、requireの結果はオブジェクト、数値、文字列、関数などです。次に、requireの結果を変数
importに割り当てることは分解プロセスですが、現在のすべてのエンジンImportはまだ実装されていません。ノードでES6をサポートするためにbabelを使用し、ES6をES5にトランスコードしてから実行するだけです。インポート構文は必要に応じてトランスコードされます。
遅延読み込みを使用する理由：
vue（spy）のようなシングルページアプリケーションの場合、遅延読み込みを使用しないと、webpackでパッケージ化されたファイルが大きすぎて、ホームページに入るときに読み込まれるリソースが多すぎて時間がかかりすぎます。ユーザーエクスペリエンスに役立ちます。遅延読み込みを使用すると、ページを分割し、必要に応じてページを読み込むことができます。これにより、ホームページの読み込み圧力を効果的に共有し、ホームページの読み込みイベントを減らすことができます。簡単に言えば、時間がかかりすぎます。一度に多くのリソースをロードせずにホームページに入る。
遅延読み込み方法：
1. ESによって提案されたインポート方法（------ ****最も一般的に使用される------）方法は次のとおりです。constHelloWorld=（）=> import（ 'アドレスロードするモジュール '）
（{}がない場合は、直接戻ることを意味します）
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = () => import("@/components/HelloWorld")
const HelloWorld = () => import('../components/HelloWorld') //推荐这种 简洁直观
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
2. vue非同期コンポーネントの遅延読み込み方法は次のとおりです。component：resolve =>（require（['ロードするルートのアドレス']）、resolve）
import Vue from "vue";
import VueRouter form "vue-router";
Vue.use(VueRouter);
export default new Router({
mode:"history",
routes:[
{
path: '/',
name: 'HelloWorld',
component: resolve=>(require(["../components/HelloWorld"],resolve))
},
{
path:'/Aboutus', //有children的不写name
meta: {
title: '关于我们'
},
children:[
{
path:'', //默认子路由 name写在默认子路由
name:'Aboutus',
component:resolve=>(require(["../components/Study"],resolve))
},
{
path:'/Study',
name:'Study',
component:resolve=>(require(["../components/Study"],resolve))
},
{
path:'/Work',
name:'Work',
component:resolve=>(require(["../components/Work"],resolve)),
meta:{
title:'work'
}
},
],
component:Aboutus
},
]
})
3. webpack独自のrequire.ensure（）を使用します。注：require.ensureはWebpackの特別な構文であり、コード分割ポイントを設定するために使用されます
例：components：r => require.ensure（[]、（）=> r（require（ '@ / components / Three'））、 'group-home'）
「group-home」は、コンポーネントをグループブロックにパッケージ化することです。複数のコンポーネントをこのグループに入れることができます。パッケージ化するとき、Webpackはすべての非同期モジュールを同じチャンクの下で1つの非同期ブロックにパックします。
const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home');
const routers = [
{
path: '/',
name: 'index',
component: Index
}
]
4.コンポーネントをチャンクに分割
する特定のルートの下にあるすべてのコンポーネントを同じ非同期チャンクにパックしたい場合があります。名前付きチャンク、チャンク名を提供するための特別なコメント構文のみを使用する必要があります（Webpack> 2.4が必要です）。
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
Webpackは、同じブロック名を持つ非同期モジュールを同じ非同期ブロックに結合します。