最近のプロジェクトでは、更新するたびにブラウザページの読み込み速度が良好であることが問題であることがわかりましたが、ブラウザは最初に読み込みに時間がかかり6sました。
次にここに問題があります：開発環境では問題ありませんが、納品後のユーザーエクスペリエンスは悪くなりますが、誰がこの商品を再利用するのでしょうか？現在の国内インターネットのトレンドでは、製品が競争力の要素を欠いている場合、それは市場によって排除される可能性があります！
白屏使い方を考えましたが、途中の読み込み時間が長すぎてユーザーの要望に応えられないので、インターネットと主要なブログを行き来して、適切な解決策を見つけ、以下の方法をまとめました。
1.パッケージ中に生成閉じるマップファイル。変更値は設定
で設定/ index.jsファイルproductionSourceMapを変更するfalse。あなたは再びそれをパッケージ化する場合は、マップファイルは存在しません。
2.Vue-routerルーティングレイジーローディングレイジーローディング
を実装する方法はたくさんあります。ここに3つの実装方法を簡単に示します。
（1）Vue非同期コンポーネント：import（）
（2）webpackのrequire.ensure（）
（3）vue非同期コンポーネント
Vue异步组件テクノロジー、つまり异步加载vue-routerは、Vueの非同期ロードテクノロジーを使用してルーティングを構成します可以实现按需加载が、この場合はコンポーネントです。产生一个js文件
解決策1：vue非同期コンポーネントテクノロジー（必須）
{
path: '/index',
name: 'index',
component: resolve => require(['@/views/index'],resolve)
}
オプション2：コンポーネントの遅延ロード（インポート）
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
// router
{
path: '/about',
component: About
}, {
path: '/index',
component: Index
}
解決策3：** webpackが提供するrequire.ensure（）**
webpackのrequire.ensure（）
は、webpackのrequire.ensure（）テクノロジーを使用します。このテクノロジーは、オンデマンドでロードすることもできます。この場合、複数のルートで同じものを指定します。チャンク名は合并打包成一个js文件
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}
3. CDNリファレンス
CDNは、コードサイズを縮小し、リクエスト速度を高速化できます。CDNを使用すると、主に2つの問題が解決されます。パッケージング時間が長すぎる、パッケージング後のコードボリュームが大きすぎる、リクエストが遅い、サーバー帯域幅の問題が回避される。
示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>vue-manage-system</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
プロンプトが表示された場合、要素は定義されていません。要素に依存Vueしているvue.js需要在element-ui之前引入ため、vue.jsは導入のcndを変更しました。
次に、/build/webpack.base.conf.js変更しながら構成を変更します。キーがプロジェクトで参照されてmodule.exportsいるexternalsプロパティを追加するには、値は参照されているリソースの名前です。リソース名は、参照されているJSソースコードをチェックし、グローバル変数が何であるかをチェックする必要があることに注意してください。たとえば、element-uiのグローバル変数はELEMENTです。
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'ElementUI': 'ELEMENT',
'axios': 'axios',
}
}
次に删除原先的import、元のインポートが削除されていない場合でも、プロジェクトはnode_modulesからリソースをインポートします。
つまり、削除しない場合でも、npm run buildは参照されたリソースを一緒にパッケージ化し、生成されたファイルははるかに大きくなります。削除したほうがいいです！
プロジェクトの実行とパッケージ化：パッケージ化
後、size合計gzippedサイズが大幅に削減されていることがわかります。通常、これは最適化でき、ブラウザ3sは最初からロードできます。