vue-cli3.0リソース・ロードの最適化シナリオ
1677 ワード
20180829更新
今日は繰り返してみましたが、テスト環境と生産環境を区別せずにcdnで統一すればいいです
背景
前に自分でvue+tp 5を構築しました.1のバックグラウンドアイテム(https://segmentfault.com/a/11...)は、ピットが多く、そのうちの1つがリソースロードのシナリオであり、バックグラウンドプロジェクトであるため、これまで気にしていなかったが、いくつかのリソース最適化シナリオを見た後(https://juejin.im/post/5a2910...)、やる必要があると思います.
古いバージョン
ファイルサイズが最も大きい820 kb、すなわちGzipped圧縮を用いた219 kbは、プロジェクトが大きくなるにつれてこの値が大きくなることがわかります
CDNを使用して加速
ここではまず参考にしてくださいhttps://juejin.im/post/5a2910...ああ、ここではvueだけします[email protected]の構成変更 index.htmlファイル
今日は繰り返してみましたが、テスト環境と生産環境を区別せずにcdnで統一すればいいです
背景
前に自分でvue+tp 5を構築しました.1のバックグラウンドアイテム(https://segmentfault.com/a/11...)は、ピットが多く、そのうちの1つがリソースロードのシナリオであり、バックグラウンドプロジェクトであるため、これまで気にしていなかったが、いくつかのリソース最適化シナリオを見た後(https://juejin.im/post/5a2910...)、やる必要があると思います.
古いバージョン
:npm run build
ファイルサイズが最も大きい820 kb、すなわちGzipped圧縮を用いた219 kbは、プロジェクトが大きくなるにつれてこの値が大きくなることがわかります
CDNを使用して加速
ここではまず参考にしてくださいhttps://juejin.im/post/5a2910...ああ、ここではvueだけします[email protected]の構成変更
VUE
vue.config.jsファイル module.exports = {
baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
outputDir: process.env.outputDir,
configureWebpack: {
externals: {
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
"element-ui": "ELEMENT"
}
}
};
ページ