Vueのプロジェクトの最適化のヒントで

 

1、パッケージングの最適化

• 抽出アセンブリ  CSS 別のファイルにし、
• シールド sourceMap
• オープン  gzip 圧縮
• チェーン外部のパブリック・ライブラリーCDN
  • 打包ベンダー时不打包VUE 、vuex 、VUE-ルータ、axios 等，换用国内的 bootcdn、unpkg 直接引入到根目录的 index.html 中。并把上述文件配置在外観中。

vue.config.js

const Gzip = require("compression-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
// vue.config.js
module.exports = {
	transpileDependencies: [
		//'vue-echarts',
		'resize-detector'
	],
    devServer: {
		disableHostCheck: true,
	},
	publicPath:'/',
	productionSourceMap:false,
	configureWebpack:config =>{
		//打包时过滤
		if (isProduction) {
			config.externals = {
				'vue': 'Vue',
				'vue-router': 'VueRouter',
			}
		}
		if(isProduction){
    		return {
    			plugins:[
    				new Gzip({
						test:/\.js$|\.html$|\.css/,
						threshold:102400,
						deleteOriginalAssets: false
					}),
					new UglifyJsPlugin({
						uglifyOptions: {
							compress: {
								//warnings: false,
								drop_debugger: true,//关闭debug
								drop_console: true
							}
						},
						sourceMap: true,//报错信息
						cache: true,
						parallel: true
					})
				]
			}
		}
	}
}

index.htmlを

    <!-- built files will be auto injected -->
  <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  <!-- CND -->
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js"></script>

図2に示すように、ソースコードの最適化

• テンプレート
  • テンプレートの内側にあまりにも多くの式を記述しないでください
  • v-for 追加 key
  • v-show、v-if 使用
  • 十分に活用します v-once
  • ピクチャー資源需要の読み込みvue-lazyload（）
  • イベントブローカーを使用しての良いです
• 脚本
  • ではcreatedフック内のデータを要求します
  • Promise.all() 同時要求
  • 使用  Object.freeze() 中止します Observer观察
  • データ監視の削減、注意 deep watch
  • をうまく利用してください  web Storage（sessionStorage、localStorage）
• アセンブリキャッシュkeep-alive（）
• サードパーティのライブラリをオンデマンドでロードされています不用加载整个库（）
• コンポーネント遅延ロードのルーティング import()

遅延ロードをルーティングrouter.js

{
			path: '/home',
			name: 'home',
			meta: {check: false},
			component: resolve=> require.ensure([],()=>resolve(require('../views/home/home')),'home')
		},
		{
			path: '/pc/index',
			name: 'pcIndex',
			meta: {check: false},
			component: resolve=> require.ensure([],()=>resolve(require('../views/pc/index')),'index')
		},

UI-需要リファレンス

import {
    LocaleProvider, Icon, Modal, Button, Radio, Avatar, BackTop, Menu, Pagination, DatePicker, Form, Input, InputNumber,
    Select, Upload, Card, Table, Tabs, Progress, Drawer, message, popconfirm, spin,Collapse,Timeline
} from 'ant-design-vue';
import layout from "ant-design-vue/lib/layout"
Vue.use(layout);

Vue.use(Collapse);//不能单独在需要的页面引用
Vue.use(Timeline);//不能单独在需要的页面引用
Vue.use(LocaleProvider);
Vue.use(Icon);
Vue.use(Modal);
Vue.use(Button);
Vue.use(Radio);
Vue.use(Avatar);
Vue.use(BackTop);
Vue.use(Menu);
Vue.use(Pagination);
Vue.use(DatePicker);
Vue.use(Form);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Select);
Vue.use(Upload);
Vue.use(Card);
Vue.use(Table);
Vue.use(Tabs);
Vue.use(popconfirm);
Vue.use(Drawer);
Vue.use(Progress);

//需要的页面才引用
 import {Row, Col} from 'ant-design-vue';
 components: {
            ARow: Row,
            ACol: Col,
        },

3、ユーザーエクスペリエンスの最適化

• fastclick 防止300msの遅延
• 積載
• ロード画面スケルトン
• サーバー側のレンダリングSSR（）

npm install fastclick -S
//main.js中全局引入，并绑定到body，全局生效。或者在单页面引入，只针对当前页面生效

//引入
import FastClick from 'fastclick'
//初始化FastClick实例。在页面的DOM文档加载完成后
FastClick.attach(document.body)