Home > Developer > Web Develop
We use the VUE-CLI tool as an example, using Vue-router to build a spa application, UI Framework selection of Element-ui, Ajax scheme selection Axios, and introduce Vuex, using Vuex-router-sync will be router synchronized to store , the server uses the local Nginx service.
vue-init webpack vue-spa-starter-kitcd vue-spa-starter-kitnpm installnpm install vuex element-ui axios -Snpm run dev
VUE-CLI will open the browser automatically, you can see the effect. We introduce in the portal file vue-router , element-ui ,axios
Src/main.jsImport' Babel-polyfill 'Import VueFrom' Vue 'Import AppFrom'./app 'Import AxiosFrom' Axios 'Import StoreFrom'./store 'import router from './router ' Span class= "Hljs-keyword" >import {sync} from Vuex-router-sync ' import elementui from ' Element-ui ' import element-ui/ Lib/theme-chalk/index.css ' Vue.config.productionTip = falsevue.use (Elementui) Vue.prototype. $http = Axiossync (store, router) /* eslint-disable no-new */new Vue ({el: ' #app ', store, router, template: <App/>", components: {App}}) Next we do not make any changes, using the default configuration for packaging, Nginx with the default configuration, deploy to Nginx, start the Nginx service
As can be seen, without the development of any page and function, vendor.js there is 788kb. If we rely on some other library, such as echarts , vendor.js can be more than 1M.
We want to separate,,, and vue vue-router vuex element-ui from vendor.js the, using CDN resources to introduce. The domestic CDN Service recommends the use of BOOTCDN. It's not very useful abroad.
First add the following in the template file index.html :
...<Head><LinkRel="Stylesheet"href="Https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" ></Head><Body><DivId="App" ></Div><ScriptSrc="Https://cdn.bootcss.com/vue/2.5.9/vue.min.js" ></Script><Scriptsrc= "https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js" >< Span class= "undefined" ></script> <script src= https:// Cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js "></< Span class= "Hljs-name" >script> <script src= "https://cdn.bootcss.com/element-ui/2.0.7/index.js" >< Span class= "undefined" ></script> <!--built files would be auto injected--></BODY> Modified build/webpack.base.conf.js . For externals configuration items, please refer to the relevant information yourself.
module.exports = { ... externals: { ‘vue‘: ‘Vue‘, ‘vuex‘: ‘Vuex‘, ‘vue-router‘: ‘VueRouter‘, ‘element-ui‘: ‘ELEMENT‘ } ...}Modifysrc/router/index.js
// import Vue from ‘vue‘import VueRouter from ‘vue-router‘// 注释掉// Vue.use(VueRouter)...Modifysrc/store/index.js
...// 注释掉// Vue.use(Vuex)...Modifysrc/main.js
Import' Babel-polyfill 'Import VueFrom' Vue 'Import AppFrom'./app 'Import AxiosFrom' Axios 'Import StoreFrom/store ' import router from import {sync} from ' Vuex-router-sync ' import ELEMENT from ' Element-ui ' //import ' element-ui/lib/theme-chalk/index.css ' Vue.config.productionTip = falsevue.use (ELEMENT) vue.prototype. $http = Axiossync (store, Router) /* eslint-disable no-new */new Vue ({el: ' #app ', store, router, template: <App/>", components: {App}}) Attention! Here
element-uithe variable name to useELEMENT, becauseelement-uithe UMD module name isELEMENT
Once again packaged and deployed to the Nginx service, you can see:
vendor.jsReduced to 112kb, increased by 85.5%!
Look at CDN Resources, 5 requests total 216kb, time 619ms!
Nginx Open gzipvendor.jsoptimized for us, next we optimize the resources on the server. First look at the effect of not opening gzip 13.5kb
Nginx Open gzip, modify Nginx configuration file nginx.conf :
...
HTTP {
...
gzip on;
Gzip_min_length 1k;
Gzip_buffers 4 16k;
#gzip_http_version 1.1;
Gzip_comp_level 2; # compression level
# The type of mine to compress
Gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml app Lication/xml+rss image/jpeg image/gif image/png image/svg+xml;
Gzip_vary off;
Gzip_proxied expired No-cache No-store private auth;
Gzip_disable "MSIE [1-6]\."; # IE6 does not support gzip
...
}
For Nginx gzip, please check the relevant information yourself
Restart the Nginx service, you can see the resources on the server after gzip compression 9kb, compression ratio 13.3%.
Development and productionWhat we've modified above is build/webpack.base.conf.js that we won't be able to use Chrome debugging tools for local development, so vue-devtools we need to separate the development and production configurations for ease of debugging.
build/webpack.base.conf.js the externals configuration items to the build/webpack.prod.conf.js middle:// build/webpack.prod.conf.jsmodule.exports = { ... externals: { ‘vue‘: ‘Vue‘, ‘vuex‘: ‘Vuex‘, ‘vue-router‘: ‘VueRouter‘, ‘element-ui‘: ‘ELEMENT‘ } ...}
index.html the template file and name it, rename the index.prod.html original index.html index.dev.html , and delete the CDN resource:<!--index.dev.html--<Head> ...<!--<link rel= "stylesheet" href= "Https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" >-</Head><Body><DivId="App" ></Div><!--<script src= "https://cdn.bootcss.com/vue/2.5.9/vue.min.js" ></script> <script src= "https:// Cdn.bootcss.com/vuex/3.0.1/vuex.min.js "></script> <script src=" https://cdn.bootcss.com/vue-router/ 3.0.1/vue-router.min.js "></script> <script src=" Https://cdn.bootcss.com/element-ui/2.0.7/index.js " ></script><!--built files would be auto injected--</Body><!--index.prod.html--<Head><LinkRel="Stylesheet"href="Https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" ></Head><Body><DivId="App" ></Div><ScriptSrc="Https://cdn.bootcss.com/vue/2.5.9/vue.min.js" ></Script><Scriptsrc= "https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js" >< Span class= "undefined" ></script> <script src= https:// Cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js "></< Span class= "Hljs-name" >script> <script src= "https://cdn.bootcss.com/element-ui/2.0.7/index.js" >< Span class= "undefined" ></script> <!--built files would be auto injected--></BODY> build/webpack.dev.conf.js :plugins: [ ... new HtmlWebpackPlugin({ filename: ‘index.html‘, template: ‘index.dev.html‘, inject: true })]
build/webpack.prod.conf.js :plugins: [ ... new HtmlWebpackPlugin({ filename: ‘index.html‘, template: ‘index.prod.html‘, inject: true, ... })]
vue-router , vuex element-ui references to:Src/main.js...if (Process.env.NODE_ENV = = =' Development ') {require ( ' element-ui/lib/theme-chalk/index.css ')}...//src/router/index.jsimport Vue from Span class= "hljs-string" > "vue" import vuerouter from ' vue-router ' if (Process.env.NODE_ENV = = = ' development ') {Vue.use (vuerouter)} ... //src/store/index.jsimport Vue From Vue import Vuex from ' Vuex ' if (Process.env.NODE_ENV = = = Development ') {Vue.use (Vuex)} ... So that we can happily use the Chrome debugging tool in the development environment vue-devtools !
Vue.js First screen optimization
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
