• 项目打包优化

    文章目录

    项目打包优化

    1. 配置文件

    1. 打开 package.json 配置文件，为 scripts 节点下的 build 命令添加 --no-module 参数：

      {
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --no-module",
    "lint": "vue-cli-service lint"
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    2. 打包项目

      npm run build

      • 1

    2. 使用 file 协议查看打包出来的项目

    1. 配置 publicPath

      const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // publicPath 默认值是 '/'，只能部署在服务器上才能看到页面效果，也就是要通过 http 协议才能访问。
  // 想要使用 file 协议在本地看到页面效果，需要将 publicPath 设置成 './' 或者 ''
+  publicPath: './',
  // 去掉生产环境下的 soursemap
  // productionSourceMap: false
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

    2. 重新打包项目

      npm run build

      • 1

    3. 配置路由懒加载

    参考 vue-router 的官方文档，进行https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#路由懒加载的配置

    1. 路由懒加载：在需要的时候，加载路由对应的组件页面
    2. 好处：可以提高 index.html 首页的打开速度

    配置路由懒加载的步骤：

    1. 运行如下的命令，安装 babel 插件：

      npm install --save-dev @babel/plugin-syntax-dynamic-import

      • 1

    2. 修改项目根目录下的 babel.config.js 配置文件，新增 plugins 节点：

      module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // 实现路由组件按需导入的 babel 插件
+ plugins: ['@babel/plugin-syntax-dynamic-import']
}

      • 1
      • 2
      • 3
      • 4
      • 5

    3. 在 /src/router/index.js 模块中，基于 const 组件 = () => import('组件的存放路径') 语法，改造每个路由组件的导入方式。
      例如：

      // 导入 Reg 组件
// import Reg from '@/views/Reg/Reg.vue'
const Reg = () => import('@/views/Reg/Reg.vue')

// 导入 Login 组件
// import Login from '@/views/Login/Login.vue'
const Login = () => import('@/views/Login/Login.vue')

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    4. 把组件按组分块

      // 导入 Reg 组件
// import Reg from '@/views/Reg/Reg.vue'
const Reg = () => import(/* webpackChunkName: "Reg" */ '@/views/Reg/Reg.vue')

// 导入 Login 组件
// import Login from '@/views/Login/Login.vue'
const Login = () => import(/* webpackChunkName: "Login" */ '@/views/Login/Login.vue')

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    4. 生成打包报告

    1. 分析什么原因导致打包出来的文件体积过大的问题

      打开 package.json 配置文件，为 scripts 节点下的 build 命令添加 --report 参数：

      {
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --no-module --report",
    "lint": "vue-cli-service lint"
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    2. 重新运行打包的命令：

      npm run build

      • 1

    3. 打包完成后，发现在 dist 目录下多了一个名为 report.html 的文件。在浏览器中打开此文件，会看到详细的打包报告。

    5. 基于 externals 配置 CDN 加速

    externals 作用

    1. 未配置 externals 之前：
      import 导入的第三方模块，在最终打包完成后，会被合并到 chunk-vendors.js 中。
      缺点：导致单个文件的体积过大
    2. 配置了 externals 之后：
      webpack 在进行打包时，会把 externals 节点下声明的第三方包排除在外
      因此最终打包生成的 js 文件中，不会包含 externals 节点下的包
      好处：优化了打包后项目的体积。

    初步配置 externals 节点

    1. 在 package.json 中，找到要使用 cdn 替换的包和版本

      {
  "dependencies": {
    "echarts": "^5.2.1"
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5

    2. 去 cdn 中找到对应的包和版本，复制脚本链接
      https://cdn.jsdelivr.net
      https://www.bootcdn.cn
      https://cdnjs.com

    3. 在 /public/index.html 文件的 结束标签之前，新增 echarts 的资源引用，在浏览器中找到脚本在 window 上挂载的包的名字：

      DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  title>
head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.strong>
  noscript>
  <div id="app">div>
  
   
+  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js">script>
body>

html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24

    4. 在项目根目录下创建 vue.config.js 配置文件，在里面新增 configureWebpack 节点如下：

      const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 在 vue-cli 中设置 webpack 配置项
  configureWebpack: {
    // 打包优化，添加打包时的排除项
    externals: {
      // 包名: 引入的 js 脚本文件中的名称
      echarts: 'echarts'
    }
  }
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12

    5. 重新运行 npm run build 命令，对比配置 externals 前后文件的体积变化。

    6. 完整的 externals 配置项

    1. 在 vue.config.js 配置文件中，找到 configureWebpack 下的 externals，添加如下的配置项：

      const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 在 vue-cli 中设置 webpack 配置项
  configureWebpack: {
    // 打包优化，添加打包时的排除项
    externals: {
      // 包名: 'cdn 脚本文件中的名字'
      echarts: 'echarts',
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      'element-ui': 'ELEMENT',
      'vue-quill-editor': 'VueQuillEditor',
      axios: 'axios',
      dayjs: 'dayjs'
    }
  }
})

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

    2. 在 /public/index.html 文件的 结束标签之前，添加如下的 js 引用：

      
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/index.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.min.js">script>
<script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.7/dayjs.min.js">script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

    3. 在 main.js 中注释掉 element-ui 的样式和 quill 的样式：

      // 1. 导入 element-ui 组件库的样式
// import 'element-ui/lib/theme-chalk/index.css'

// 2. 导入 quill 的样式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    4. 在 /public/index.html 文件的 标签之后，引入需要的 css 样式：

      <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/theme-chalk/index.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.core.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.snow.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.bubble.min.css" rel="stylesheet">

      • 1
      • 2
      • 3
      • 4
  • 相关阅读:
    基于路网层次收缩的快速分布式地图匹配算法
    Java大总结之——静态方法和静态变量+代码块+抽象类+接口+单例设计模式+模版设计模式
    Bean的生命周期
    向npm发包
    JVM源码解析Java Attach处理流程
    技术管理三级跳
    分享一套 MT4 crm MT4 MT5 CRM源码、web trade交易系统
    L2TP客户端之Strongswan移植（三）
    PyCharm连接MySQL数据库竟然如此简单
    微信小程序一键获取位置
  • 原文地址：https://blog.csdn.net/m0_62181310/article/details/126611676