前端知识总结（三）：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 具有更好的可用性，更低的网络延迟和丢包率 。