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
},