路由的优化

vue单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载时间。

{    path: '/calendar',    component:resolve => require(["@/components/home/calendar"],resolve),    name:"calendar" },

打包优化

如何打包优化，减少 vender bundle的体积？

将项目中用到的vue、vuex、vue-router、axios等等换成cdn的方式,在index.html中用script标签引入

cdn：bootcdn、七牛云的 http://staticfile.org/

vue-cli版本3中通过根目录的vue.config.js配置忽略不需要打包的库

module.exports = {    configureWebpack: {        externals: {            vue: "Vue",            vuex: "Vuex",            "vue-router": "VueRouter",        }    }};

列表的优化

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

关闭打包后生成source map文件

一般打包后会生成.map文件，增大体积。

vue-cli 版本3中通过根目录的vue.config.js设置productionSourceMap为false。

module.exports = {    productionSourceMap:false};

开启gzip压缩

npm i -D compression-webpack-plugin

vue-cli@3中配置vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin');module.exports = {    productionSourceMap:false,    configureWebpack: config => {        let obj={};        if (process.env.NODE_ENV==="production") {            obj.plugins=[new CompressionWebpackPlugin({                algorithm: 'gzip',                test: /\.js$|\.html$|\.css/, //匹配文件名                threshold: 10240,//对超过10k的数据进行压缩                minRatio: 0.8 //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。            })]        }        obj.externals={            vue: "Vue",            vuex: "Vuex",            "vue-router": "VueRouter",        };        return obj;    }};

设置本地访问，不通过http方式

vue-cli@3中修改vue.config.js

module.exports = {    publicPath: './'}

设置目录别名

vue-cli@3中修改vue.config.js

const path=require("path");function resolve (dir) {    return path.join(__dirname, dir)}module.exports = {  chainWebpack: (config) => {    config.resolve.alias      .set('@', resolve('src'))  }};