文章目录

项目打包优化

项目打包优化

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"
  }
}

打包项目
```
npm run build
```

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

配置 publicPath

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

重新打包项目
```
npm run build
```

3. 配置路由懒加载

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

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

配置路由懒加载的步骤：

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

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

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

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

在 /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')

把组件按组分块

// 导入 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')

4. 生成打包报告

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

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

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

重新运行打包的命令：
```
npm run build
```
打包完成后，发现在 dist 目录下多了一个名为 report.html 的文件。在浏览器中打开此文件，会看到详细的打包报告。

5. 基于 externals 配置 CDN 加速

externals 作用

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

初步配置 externals 节点

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

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

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

在 /public/index.html 文件的 <body> 结束标签之前，新增 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>
  <!-- built files will be auto injected -->
   
+  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</body>

</html>

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

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

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

6. 完整的 externals 配置项

在 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'
    }
  }
})

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

<!-- built files will be auto injected -->
<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/[email protected]/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>

在 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'

在 /public/index.html 文件的 <title></title> 标签之后，引入需要的 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">