前端知識總結（三）：vue項目優化

 

1.路由懶加載

import Vue from 'vue'
 import Router from 'vue-router'
 import store from './store'
 import Home from './views/Home.vue'
 
 Vue.use(Router)
 
 const router = new Router({
   routes: [
     {
       path: '/',
       name: 'home',
       component: Home,
     },
     {
       path: '/404',
       name: '404',
       component: resolve => require(['../components/page/404.vue'], resolve),
     }
   ],
 })

2. webpack動態導入

將statically import(靜態導入) 改爲 dynamic import(動態導入)進行代碼拆分

 import(/* webpackChunkName: "html2canvas" */ 'html2canvas').then(
   ({ default: html2canvas }) => {
     html2canvas(document.querySelector('.container'), {
       scale: window.devicePixelRatio,
       allowTaint: false,
       useCORS: true,
     }).then(canvas => {
       console.log(canvas.toDataURL('image/jpeg', 0.9))
     })
   }
 )

3. 預取/預加載模塊(prefetch/preload module)

在聲明 import 時，使用下面這些內置指令，可以讓 webpack 輸出 "resource hint(資源提示)"，來告知瀏覽器：

　　prefetch(預取)：將來某些導航下可能需要的資源
　　preload(預加載)：當前導航下可能需要資源

import(/* webpackPrefetch: true */ 'LoginModal');
 
import(/* webpackPreload: true */ 'ChartingLibrary');

這會生成 <link rel="prefetch" href="login-modal-chunk.js"> 並追加到頁面頭部，指示着瀏覽器在閒置時間預取 login-modal-chunk.js 文件。

只要父 chunk 完成加載，webpack 就會添加 prefetch hint(預取提示)。

與 prefetch 指令相比，preload 指令有許多不同之處：

• preload chunk 會在父 chunk 加載時，以並行方式開始加載。prefetch chunk 會在父 chunk 加載結束後開始加載。
• preload chunk 具有中等優先級，並立即下載。prefetch chunk 在瀏覽器閒置時下載。
• preload chunk 會在父 chunk 中立即請求，用於當下時刻。prefetch chunk 會用於未來的某個時刻。
• 瀏覽器支持程度不同。

vue默認開啓，可在vue.config.js中全局禁用prefetch，再針對指定模塊開啓。

chainWebpack: config => {
  config.plugins.delete('prefetch')
},

4. 添加Gzip打包配置(compression-webpack-plugin)

　　yarn add compression-webpack-plugin -D

configureWebpack: config => {
  const CompressionPlugin = require('compression-webpack-plugin')
  config.plugins.push(new CompressionPlugin())
}

5. 圖片優化

1、圖片大小優化，部分圖片使用WebP（需要考慮webp兼容性）

• 在線生成，如智圖、又拍雲
• gulp生成，gulp-webp或gulp-imageisux
• canvas生成

2、減少圖片請求，使用雪碧圖

• 在線生成：sprites Generator、騰訊的gopng、spriteme
• 代碼生成：gulp.spritesmith或者sass的compass

6. 壓縮js，刪除console(terser-webpack-plugin)

yarn add terser-webpack-plugin -D

 configureWebpack: config => {
   const TerserPlugin = require('terser-webpack-plugin')
   config.optimization.minimizer.push(
     new TerserPlugin({
       extractComments: false,
       terserOptions: { compress: { drop_console: true } },
     })
   )
 }

 

7.第三方插件的按需引入

import{ Button, Select } from'element-ui';

8.CDN 的使用

瀏覽器從服務器上下載CSS、js 和圖片等文件時都要和服務器連接，而大部分服務器的帶寬有限，如果超過限制，網頁就半天反應不過來。而 CDN 可以通過不同的域名來加載文件，從而使下載文件的併發連接數大大增加，且CDN 具有更好的可用性，更低的網絡延遲和丟包率 。