#1.懒加载

#2.dllplugin

#3.整合模块

• 多页应用中入口文件相同的配置需要整合

  
  
  
  
  
  
  

   

   

   

   

   

   

  
  
  
  
  
  
  

  // main.jsimport Vue from "vue"import App from "./index.vue"import router from "./router"import store from "@/store/"import { Navigator } from "../../common"if (process.env.NODE_ENV !== "production") {
    var VConsole = require("vconsole/dist/vconsole.min.js")
    var vConsole = new VConsole()
    Vue.config.performance = true}Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouternew Vue({
    router,
    store,
    render: (h) => h(App),}).$mount("#app")

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  

• 1.封装代码

  import { Navigator } from "../index"export default (Vue) => {
    if (process.env.NODE_ENV !== "production") {
      var VConsole = require("vconsole/dist/vconsole.min.js")
      var vConsole = new VConsole()
      Vue.config.performance = true
    }
    Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter}

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

• 2.多页中使用

  
  
  
  
  
  

   

  
  
  
  
  
  
  

  import Vue from "vue"import App from "./index.vue"import router from "./router"import store from "@/store/"import entryConfig from "_lib/entryConfig/"entryConfig(Vue)new Vue({
    router,
    store,
    render: (h) => h(App),}).$mount("#app")

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  

#4.gzip 压缩

• 在 webpack 生产环境中增加 Gzip 压缩配置,实现了打包后输出增加对应的.gz 为后缀的文件,减少文件传输大小，提高性能

  
  
  
  
  
  
  
  

   

   

   

   

   

   

   

  
  
  
  
  
  
  

  /* vue.config.js */const isPro = process.env.NODE_ENV === 'production'...configureWebpack: config => {
    if (isPro) {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            asset: '[path].gz[query]',// 目标文件名称。[path] 被替换为原始文件的路径和 [query] 查询
            algorithm: 'gzip',// 使用 gzip 压缩
            test: new RegExp('\\.(js|css)$'),// 处理与此正则相匹配的所有文件
            threshold: 10240,// 只处理大于此大小的文件
            minRatio: 0.8，// 最小压缩比达到 0.8 时才会被压缩
          })
        ]
      }
    }}...

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  

• 在 Nginx 开启 Gzip 压缩配置

  http {
    # 开启gzip
    gzip on;
  
    # 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
    gzip_min_length 1k;
  
    # gzip 压缩级别 1-10
    gzip_comp_level 2;
  
    # 进行压缩的文件类型。
  
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;}

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  

#5.webpack  的优化

• 1.简化路径

• 1.可以提高性能而且能够非常友好的对于开发者和协同人员进行阅读

• 2.能避免使用../路径出错的风险（当页面大量拷贝文件到其他目录使用时相对路径会报错）

• 简化路径的好处：

• 案例参考:2.简化路径

• 2.全局样式

• 1.可以不用在开发页面每次引入

• 好处：

• 案例参考:2.全局样式

#5.1.开发环境中

• HRM (热替换)

• soure-map （调试）

• size-plugin（监控打包资源的体积变量化）

• speed-measure-webpack-plugin（分析 loader 和 plugin 打包的耗时）

• webpack-bundle-analyzer（打包生成代码块分析视图）

  
  
  
  
  
  
  
  
  
  

   

  
  
  
  
  
  
  
  

  /* vue.config.js */const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginconst isPro = process.env.NODE_ENV === 'production'module.exports = {
    ...
    configureWebpack: config => {
      if (isPro) {
        return {
          plugins: [
            new BundleAnalyzerPlugin()// 使用包分析工具
          ]
        }
      }
    },
    ...}

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  

#5.2.生产环境中

• 体积优化

• css 提取（mini-css-extract-plugin）

• css 压缩 （optimize-css-assets-webpack-plugin）

• html 压缩 （html-webpack-plugin ）

• externals （排除不需要被打包的第三方）

• js 压缩 （production 模式自动开启）

• tree-shake ( production 模式自动开启(webpack4 限 EsModule;webpack5 不限 EsModule,CommonJs,优秀得很) )

• code-split ( optimization )

• import(懒加载，预加载（预加载慎用））

• 打包速度优化

• 多线程打包（thread-loader 、happyPack）

• 动态链 （ DLL ）

• babel 缓存（ 缓存 cacheDirectory ）

• exclude / exclude (排除一些不需要编译的文件)

• module.noParse (排除不需要被 loader 编译的第三方库)

#6.图片压缩

当图片比较大时（如：大于 1M）,可以先在压缩网站将图片体积压缩，然后使用 https://imagecompressor.com/zh/(opens new window)

• 缩略图

• base64 压缩图片

#7.keep-alive

<template>
  <div id="app">
    <keep-alive :include="includedComponents">
      <router-view></router-view>
    </keep-alive>
    <bottom-tab></bottom-tab>
  </div></template>

#8.减少响应式数据

• Object.freeze

• 减少 watch 数量，可以用一个 watch 进行深度监听一个对象数据