基於cli3.0的vue項目的性能優化

基於cli3.0的vue項目性能優化中首頁加載優化我使用到的優化方案

1.在vue.config.js中設置 productionSourceMap：false，可以使得打包過后的文件不包含未壓縮的.map文件，減少壓縮后代碼體積

2.vue.config.js中設置如下代碼，使得首頁不預先加載其他頁面的css和js，首頁能更快加載

chainWebpack:config =>{
        // 移除 prefetch 插件
        config.plugins.delete("prefetch");
        // 移除 preload 插件
        config.plugins.delete('preload');
        // 壓縮代碼
          config.optimization.minimize(true);
        // 分割代碼
          config.optimization.splitChunks({
            chunks: 'all'
        })    
    }

3.路由使用路由懶加載的方式，並且同一路由塊的路由設置名相同，可以使用路由打包的時候文件少一些

1）webpack提供的路由懶加載方式，設置webpackName相同會生成同一個js文件

　　const interAirListGo = r => require.ensure([], () => r(require('../views/interAirList/interAirList')), 'webpackName')
　　const interAirListBack = r => require.ensure([], () => r(require('../views/interAirList/interAirList')), 'webpackName')
2)Vue官方提供的require(),每個路由會打包成一個js文件

{

 path: '/home', name: 'home', component: resolve => require(['@/components/home'], resolve) }
3)es6提供的import(),每個路由會打包成一個js文件

const Home = () => import('@/components/home')

4.項目中引入圖片壓縮（圖片在線免費壓縮網站 http://tintpng.com），圖片放到cdn上面

5.去掉項目中的console.log

6.項目里用到的第三方js庫主要有：vue, vue-router, vuex, axio。大家知道這些依賴庫的js文件都會被一起打包到vendor那個js文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導致vendor這個文件很大，那首屏加載的速度肯定會被拖慢,去掉package.json文件中無用的安裝依賴，在index.html中使用cdn文件代替

7.骨架屏加載 提升用戶體驗（此圖是盜圖）

8.根據webpack打包后依賴關系分析性能問題

1）npm install --save-dev webpack-bundle-analyzer

2）在webpack.config.js中：

let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
plugins: [new BundleAnalyzerPlugin()]
}

3)npm run build --report 查看性能分析報告

4）生成的性能分析圖

 

 我們應該先從紅色和橙色塊中分析大的依賴包如何處理，以及分析哪些包並沒有使用卻在項目中引用的情況，我們應該刪除這些引用。現在看到的情況已經是我刪除過moment.js的情況，分析圖中我發現

我們項目中引用了moment.js時間處理插件，我將項目中用到的moment.js替換成js的方法使用 最終打包的項目體積減少了100多KB；對於一些大的引用我們應該考慮使用CDN方式引入