├── static └── .gitkeep ├── src ├── store │ ├── actions.js │ ├── getters.js │ ├── state.js │ ├── mutations.js │ ├── modules │ │ ├── index.js │ │ └── contacts.js │ └── index.js ├── assets │ └── logo.png ├── api │ └── index.js ├── router │ └── index.js ├── main.js ├── App.vue └── components │ ├── Contacts.vue │ └── Home.vue ├── .eslintignore ├── favicon.png ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── .babelrc ├── .postcssrc.js ├── index.html ├── .eslintrc.js ├── README.md └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/store/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haochuan9421/vue-optimization/HEAD/favicon.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haochuan9421/vue-optimization/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/store/modules/index.js: -------------------------------------------------------------------------------- 1 | import contacts from './contacts' 2 | export default { 3 | contacts 4 | } 5 | -------------------------------------------------------------------------------- /src/api/index.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export function getContactsList () { 4 | return axios.get('http://jsonplaceholder.typicode.com/users') 5 | } 6 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-optimization 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/store/modules/contacts.js: -------------------------------------------------------------------------------- 1 | import { getContactsList } from '@/api' 2 | export default { 3 | namespaced: true, 4 | state: { 5 | list: [] 6 | }, 7 | mutations: { 8 | updateList (state, data) { 9 | state.list = data 10 | } 11 | }, 12 | actions: { 13 | getList ({commit}) { 14 | return getContactsList().then((res) => { 15 | commit('updateList', res.data) 16 | }) 17 | } 18 | }, 19 | getters: { 20 | 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | Vue.use(Router) 4 | 5 | const Home = () => import('@/components/Home') 6 | const Contacts = () => import('@/components/Contacts') 7 | 8 | export default new Router({ 9 | routes: [ 10 | { 11 | path: '/', 12 | name: 'Home', 13 | component: Home 14 | }, 15 | { 16 | path: '/Contacts', 17 | name: 'Contacts', 18 | component: Contacts 19 | } 20 | ] 21 | }) 22 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import state from './state' 5 | import mutations from './mutations' 6 | import actions from './actions' 7 | import getters from './getters' 8 | import modules from './modules' 9 | 10 | Vue.use(Vuex) 11 | 12 | const store = new Vuex.Store({ 13 | state, 14 | mutations, 15 | actions, 16 | getters, 17 | modules, 18 | strict: process.env.NODE_ENV === 'development' 19 | }) 20 | 21 | export default store 22 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | import store from './store' 7 | import ElementUI from 'element-ui' 8 | import 'element-ui/lib/theme-chalk/index.css' 9 | Vue.use(ElementUI) 10 | 11 | Vue.config.productionTip = false 12 | 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', 16 | router, 17 | store, 18 | components: { App }, 19 | template: '' 20 | }) 21 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-optimization 2 | 3 | > 本项目意在通过不同的分支展示不同的**优化**方式，对`vue`项目**性能**的影响，探索`vue`开发中有**显著效果**的**可行性**优化方案(尽可能不改动业务代码)。你可以切换分支，查看`git`历史，通过比对文件变化，来了解实现的具体细节。 4 | 5 | > `VUE CLI 3` 的优化配置请移步[这里](https://github.com/HaoChuan9421/vue-cli3-optimization) 6 | 7 | ### 当前分支 —— base(基础版本) 8 | 9 | 通过`vue-cli@2`生成，只包含最基础的`Vue`三件套 ———— `vue`、`vue-router`、`vuex`以及常用的`element-ui`和`axios`，且只进行简单的使用。直接`build`，不做任何优化处理，作为参考系。 10 | 11 | ### 构建后文件说明： 12 | 1. `app.css`： 压缩合并后的样式文件。 13 | 2. `app.js`：主要包含项目中的`App.vue`、`main.js`、`router`、`store`等基础代码。 14 | 3. `vendor.js`：主要包含项目依赖的诸如`vuex`，`axios`等第三方库的源码，这也是为什么这个文件如此之大的原因，下一步将探索如何优化这一块，毕竟随着项目的开发，依赖的库也能会越来越多。 15 | 4. `数字.js`：以0、1、2、3等数字开头的`js`文件，这些文件是各个路由切分出的代码块，因为我拆分了两个路由，并做了[路由懒加载](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)，所以出现了0和1两个`js`文件。 16 | 5. `mainfest.js`：`mainfest`的英文有*清单、名单的意思*，该文件包含了加载和处理路由模块的逻辑 17 | 18 | ![](https://user-gold-cdn.xitu.io/2018/9/29/16625d3c1cdfa267?w=1890&h=846&f=png&s=317765) 19 | 20 | ### 禁用缓存，限速为`Fast 3G`的`Network`图(运行在本地的`nginx`服务器上) 21 | 22 | 可以看到未经优化的`base`版本在`Fast 3G`的网络下大概需要7秒多的时间才加载完毕 23 | 24 | ![](https://user-gold-cdn.xitu.io/2018/9/29/16625d34818e42f0?w=3276&h=1562&f=png&s=449063) 25 | -------------------------------------------------------------------------------- /src/components/Contacts.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 47 | 48 | 56 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 85 | 86 | 96 | 97 | 98 | 114 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-optimization", 3 | "version": "1.0.0", 4 | "description": "探索vue项目性能优化的各种可行性方案", 5 | "author": "HaoChuan9421 ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js" 12 | }, 13 | "dependencies": { 14 | "axios": "^0.18.0", 15 | "element-ui": "^2.4.8", 16 | "vue": "^2.5.2", 17 | "vue-router": "^3.0.1", 18 | "vuex": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^7.1.2", 22 | "babel-core": "^6.22.1", 23 | "babel-eslint": "^8.2.1", 24 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 25 | "babel-loader": "^7.1.1", 26 | "babel-plugin-syntax-jsx": "^6.18.0", 27 | "babel-plugin-transform-runtime": "^6.22.0", 28 | "babel-plugin-transform-vue-jsx": "^3.5.0", 29 | "babel-preset-env": "^1.3.2", 30 | "babel-preset-stage-2": "^6.22.0", 31 | "chalk": "^2.0.1", 32 | "copy-webpack-plugin": "^4.0.1", 33 | "css-loader": "^0.28.0", 34 | "eslint": "^4.15.0", 35 | "eslint-config-standard": "^10.2.1", 36 | "eslint-friendly-formatter": "^3.0.0", 37 | "eslint-loader": "^1.7.1", 38 | "eslint-plugin-import": "^2.7.0", 39 | "eslint-plugin-node": "^5.2.0", 40 | "eslint-plugin-promise": "^3.4.0", 41 | "eslint-plugin-standard": "^3.0.1", 42 | "eslint-plugin-vue": "^4.0.0", 43 | "extract-text-webpack-plugin": "^3.0.0", 44 | "file-loader": "^1.1.4", 45 | "friendly-errors-webpack-plugin": "^1.6.1", 46 | "html-webpack-plugin": "^2.30.1", 47 | "node-notifier": "^5.1.2", 48 | "optimize-css-assets-webpack-plugin": "^3.2.0", 49 | "ora": "^1.2.0", 50 | "portfinder": "^1.0.13", 51 | "postcss-import": "^11.0.0", 52 | "postcss-loader": "^2.0.8", 53 | "postcss-url": "^7.2.1", 54 | "rimraf": "^2.6.0", 55 | "semver": "^5.3.0", 56 | "shelljs": "^0.7.6", 57 | "uglifyjs-webpack-plugin": "^1.1.1", 58 | "url-loader": "^0.5.8", 59 | "vue-loader": "^13.3.0", 60 | "vue-style-loader": "^3.0.1", 61 | "vue-template-compiler": "^2.5.2", 62 | "webpack": "^3.6.0", 63 | "webpack-bundle-analyzer": "^2.9.0", 64 | "webpack-dev-server": "^2.9.1", 65 | "webpack-merge": "^4.1.0" 66 | }, 67 | "engines": { 68 | "node": ">= 6.0.0", 69 | "npm": ">= 3.0.0" 70 | }, 71 | "browserslist": [ 72 | "> 1%", 73 | "last 2 versions", 74 | "not ie <= 8" 75 | ] 76 | } 77 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | // 将assetsPublicPath从'/'修改为'./' 52 | // 是因为当你的项目不是部署在网站根目录下时，如http://www.example.com/my-app/， 53 | // 你期望的请求地址是http://www.example.com/my-app/static/js/app.js 54 | // 而实际的请求地址是http://www.example.com/static/js/app.js 55 | assetsRoot: path.resolve(__dirname, '../dist'), 56 | assetsSubDirectory: 'static', 57 | assetsPublicPath: './', 58 | 59 | /** 60 | * Source Maps 61 | */ 62 | 63 | productionSourceMap: true, 64 | // https://webpack.js.org/configuration/devtool/#production 65 | devtool: '#source-map', 66 | 67 | // Gzip off by default as many popular static hosts such as 68 | // Surge or Netlify already gzip all static assets for you. 69 | // Before setting to `true`, make sure to: 70 | // npm install --save-dev compression-webpack-plugin 71 | productionGzip: false, 72 | productionGzipExtensions: ['js', 'css'], 73 | 74 | // Run the build command with an extra argument to 75 | // View the bundle analyzer report after build finishes: 76 | // `npm run build --report` 77 | // Set to `true` or `false` to always turn it on or off 78 | bundleAnalyzerReport: process.env.npm_config_report 79 | } 80 | } 81 | --------------------------------------------------------------------------------