vue-cli@3中优化和其余设置

路由的优化

vue单页面应用，若是没有应用懒加载，运用webpack打包后的文件将会异常的大，形成进入首页时，须要加载的内容过多，时间过长，会出现先长时间的白屏，即便作了loading也是不利于用户体验，而运用懒加载则能够将页面进行划分，须要的时候加载页面，能够有效的分担首页所承担的加载压力，减小首页加载时间。

第一种写法：

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

第二种写法

{
    path: '/calendar',
    component:()=>import('@/components/home/calendar'),
    name:"calendar" 
},

在 vuecli 3中，咱们还须要多作一步工做，由于 vuecli 3默认开启 prefetch(预先加载模块)，提早获取用户将来可能会访问的内容
在首屏会把这十几个路由文件，都一口气下载了，因此咱们要关闭这个功能，在 vue.config.js中设置

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 或者
    // 修改它的选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

打包优化

如何打包优化，减小 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 不存在的元素。

<div v-for="item in items" :key="item.id">

有相同父元素的子元素必须有独特的 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'))
  }
};

分析打包的工具

以vue-cli@3的为例子

先安装插件

cnpm intall webpack-bundle-analyzer –save-dev

而后在 vue.config.js中对 webpack进行配置

chainWebPack:(config)=>{
  //添加分析工具
  if(process.env.NODE_ENV==="production"){
     if(process.env.npm_config_report){
       config
            .plugin("webpack-bundle-analyzer")
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
            .end();
       config.plugins.delete('prefetch')  //移除 prefetch (预载)插件，详情看vue-cli官网
     }
  }
}

再运行 npm run build --report

会在浏览器打开一个项目打包的状况图，便于直观地比较各个 bundle文件的大小，也能够经过 converge来查看代码的使用情况。

css关闭拆分

vuecli 3会默认开启一个 css分离插件 ExtractTextPlugin，每个模块的 css文件都会分离出来

咱们能够在 vue.config.js中关闭它

css:{   
    // 是否使用css分离插件 ExtractTextPlugin
    extract:false,
    
    // 开启 CSS source maps?
    sourceMap:false,
    
    // css 预设器配置项
    loaderOptions:{},
    
    // 启用 CSS modules for all css / pre-processor files.
    modules:false
},