深入分析 Vue CLI (基于 Webpack) 的默认配置和优化策略，例如 Tree Shaking, Code Splitting, Terser 插件。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是今天的特邀讲师，咱们今天的主题是“Vue CLI (Webpack 动力引擎) 默认配置深度游 & 优化秘籍”。准备好，咱们要开始一段充满代码和段子的旅程了！

第一站：Vue CLI 默认配置概览 – “开箱即用”的秘密

Vue CLI 就像一个贴心的管家，帮我们把 Webpack 配置好了。让我们先揭开它的面纱，看看默认情况下它都做了些什么。

基础配置 (webpack.config.js)： 虽然我们通常看不到完整的 Webpack 配置文件，但 Vue CLI 背后默默地为我们做了很多。它使用 vue-cli-service 来管理 Webpack 的配置。我们可以通过 vue.config.js 文件来定制这些配置。
入口 (entry)： 默认情况下，src/main.js 是我们应用的入口。Webpack 会从这里开始，像蜘蛛一样爬遍我们的代码，找到所有依赖。
```
// src/main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
```
输出 (output)： 构建后的文件默认会放在 dist 目录下。Webpack 会生成 JavaScript、CSS 和其他资源，并根据配置进行命名。
```
// vue.config.js (简化版，展示如何配置 outputDir)
module.exports = {
  outputDir: 'my-dist' // 修改输出目录
}
```
加载器 (loaders)： 这是 Webpack 的核心武器库。它们负责处理各种类型的文件，比如 .vue、.js、.css 等。
- vue-loader：解析 .vue 文件，将模板、脚本和样式分别处理。
- babel-loader：将 ES6+ 代码转换为浏览器可以理解的 ES5 代码。
- css-loader：处理 CSS 文件，解析 @import 和 url() 等语句。
- style-loader：将 CSS 插入到 HTML 页面中。
- file-loader 和 url-loader：处理图片、字体等静态资源。
插件 (plugins)： 插件是 Webpack 的扩展，可以执行各种任务，比如优化代码、生成 HTML 文件等。
- VueLoaderPlugin：配合 vue-loader 使用，处理 .vue 文件。
- HtmlWebpackPlugin：生成 HTML 文件，并将 JavaScript 和 CSS 资源注入到 HTML 中。
- MiniCssExtractPlugin：将 CSS 提取到单独的文件中，而不是内联在 JavaScript 中。

第二站：Tree Shaking – “摇掉”无用代码

Tree Shaking 就像园丁一样，把项目中没有用到的代码“摇掉”，减少打包体积。Webpack 默认开启了 Tree Shaking，但我们需要注意一些事项，才能让它发挥最大威力。

ES 模块 (ES Modules)： Tree Shaking 只能对 ES 模块有效。所以，尽量使用 import 和 export 语法，而不是 CommonJS 的 require 和 module.exports。
```
// good (ES Modules)
import { add } from './utils'

// bad (CommonJS)
const add = require('./utils').add
```
副作用 (sideEffects)： 有些模块可能会有副作用，比如修改全局变量。Webpack 默认会认为所有模块都没有副作用，除非我们明确告诉它。
- 在 package.json 中设置 sideEffects 属性，告诉 Webpack 哪些文件有副作用。
```
// package.json
{
  "sideEffects": [
    "./src/some-file-with-side-effects.js",
    "*.css" // 所有的 CSS 文件都有副作用
  ]
}
```
- 如果你的代码没有任何副作用，可以设置 "sideEffects": false，告诉 Webpack 可以安全地进行 Tree Shaking。
代码示例

假设我们有一个 utils.js 文件：

// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

在 main.js 中，我们只使用了 add 函数：

// main.js
import { add } from './utils';

console.log(add(2, 3)); // 输出 5

经过 Tree Shaking，subtract 函数就不会被打包到最终的构建文件中，从而减少了文件大小。

第三站：Code Splitting – “分而治之”的策略

Code Splitting 就像切蛋糕一样，把一个大的 JavaScript 文件分成多个小的文件，按需加载。这样可以提高首屏加载速度，改善用户体验。

路由级拆分 (Route-based Splitting)： 这是最常见的 Code Splitting 方式。我们可以将每个路由对应的组件和依赖打包成一个单独的文件。

使用 import() 语法进行动态导入。

// 路由配置
const routes = [
  {
    path: '/home',
    component: () => import('./components/Home.vue') // 动态导入
  },
  {
    path: '/about',
    component: () => import('./components/About.vue')
  }
]

提取公共模块 (Vendor Splitting)： 将第三方库 (如 Vue、React、Lodash) 打包成一个单独的文件，避免重复打包。

Vue CLI 默认已经配置好了 Vendor Splitting。

我们可以通过 vue.config.js 文件来定制 Vendor Splitting 的策略。

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name: 'vendor',
            chunks: 'all'
          }
        }
      }
    }
  }
}

代码示例

假设我们有一个 App.vue 文件，其中包含了两个组件 Home.vue 和 About.vue。

// App.vue
<template>
  <div>
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

通过配置路由级拆分，Home.vue 和 About.vue 会被打包成单独的文件，只有在访问对应的路由时才会加载。

第四站：Terser 插件 – 代码压缩的艺术

Terser 插件就像一位雕塑家，把我们的代码“雕琢”得更加精简。它可以移除空格、注释和无效代码，并进行变量名混淆，从而减小文件体积。

默认配置： Vue CLI 默认已经集成了 Terser 插件，并进行了合理的配置。

自定义配置： 如果你需要更精细的控制，可以通过 vue.config.js 文件来修改 Terser 插件的配置。

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true // 移除 console.log 语句
            }
          }
        })
      ]
    }
  }
}

生产环境： Terser 插件通常只在生产环境 (production) 下启用，因为代码压缩会降低开发环境的构建速度。

第五站：深入优化策略 – 性能提升的进阶之路

除了以上几个核心优化点，我们还可以尝试一些更高级的优化策略，进一步提升应用的性能。

Gzip 压缩： 使用 Gzip 压缩可以显著减小文件体积，从而加快传输速度。
- 配置服务器 (如 Nginx、Apache) 启用 Gzip 压缩。
- 或者使用 Webpack 插件 (如 compression-webpack-plugin) 在构建时生成 Gzip 文件。
Brotli 压缩： Brotli 是一种比 Gzip 更高效的压缩算法。
- 需要服务器支持 Brotli 压缩。
- 可以使用 Webpack 插件 (如 brotli-webpack-plugin) 在构建时生成 Brotli 文件。
图片优化： 图片是影响网页性能的重要因素。
- 使用合适的图片格式 (如 WebP)。
- 压缩图片大小。
- 使用 CDN 加速图片加载。
- 使用懒加载 (lazy loading) 技术。
CDN 加速： 将静态资源 (如 JavaScript、CSS、图片) 放到 CDN 上，可以利用 CDN 的缓存和加速功能，提高加载速度。
- 配置 publicPath 属性，指向 CDN 地址。
```
// vue.config.js
module.exports = {
  publicPath: 'https://cdn.example.com/'
}
```
预渲染/服务端渲染 (SSR):

预渲染: 在构建时生成静态HTML文件，加快首屏加载速度，特别适合SEO优化。可以使用prerender-spa-plugin等插件。
服务端渲染: 在服务器端渲染Vue应用，将渲染好的HTML发送给客户端，同样可以提高首屏加载速度和SEO。可以使用Nuxt.js框架。

第六站： Vue CLI 优化配置清单

为了方便大家查阅，我把常用的优化配置整理成一个表格：

优化策略	配置方式	效果	注意事项
Tree Shaking	确保使用 ES 模块 (`import` / `export`)；在 `package.json` 中设置 `sideEffects` 属性。	移除未使用的代码，减小文件体积。	确保你的代码没有副作用，或者正确声明副作用。
Code Splitting	使用 `import()` 语法进行动态导入；配置 `vue.config.js` 中的 `optimization.splitChunks` 选项。	将代码分割成多个小的文件，按需加载，提高首屏加载速度。	合理配置 `splitChunks` 选项，避免过度拆分导致请求过多。
Terser 插件	可以通过 `vue.config.js` 中的 `configureWebpack.optimization.minimizer` 选项进行配置。	压缩代码，移除空格、注释和无效代码，减小文件体积。	通常只在生产环境启用。
Gzip 压缩	配置服务器 (如 Nginx、Apache) 启用 Gzip 压缩；或者使用 Webpack 插件 (如 `compression-webpack-plugin`) 在构建时生成 Gzip 文件。	显著减小文件体积，加快传输速度。	需要服务器支持 Gzip 压缩。
Brotli 压缩	使用 Webpack 插件 (如 `brotli-webpack-plugin`) 在构建时生成 Brotli 文件。	比 Gzip 更高效的压缩算法，减小文件体积。	需要服务器支持 Brotli 压缩。
图片优化	使用合适的图片格式 (如 WebP)；压缩图片大小；使用 CDN 加速图片加载；使用懒加载 (lazy loading) 技术。	减小图片体积，加快加载速度。	综合考虑图片质量和文件大小。
CDN 加速	配置 `vue.config.js` 中的 `publicPath` 属性，指向 CDN 地址。	利用 CDN 的缓存和加速功能，提高静态资源的加载速度。	确保 CDN 上有对应的资源。
预渲染 (Prerender)	使用 `prerender-spa-plugin` 等插件。	加快首屏加载速度，有利于SEO优化。	适用于静态内容为主的页面。
服务端渲染 (SSR)	使用 `Nuxt.js` 框架。	加快首屏加载速度，有利于SEO优化，更好的用户体验。	配置相对复杂，需要服务器支持。

第七站：避坑指南 – 那些年我们踩过的坑

过度优化： 不要为了优化而优化。过度的优化可能会增加代码的复杂性，反而得不偿失。
缓存问题： 在部署新版本时，可能会遇到缓存问题。确保正确配置缓存策略，或者使用版本号来强制刷新缓存。
兼容性问题： 不同的浏览器对 ES6+ 的支持程度不同。使用 Babel 可以将 ES6+ 代码转换为 ES5 代码，提高兼容性。
不监控构建指标: 不监控构建时间和包大小的变化，就无法知道优化是否有效，或者是否有引入新的性能问题。

第八站：总结 – 优化永无止境

优化是一个持续不断的过程。我们需要根据项目的实际情况，选择合适的优化策略，并不断进行测试和调整。希望今天的分享能帮助大家更好地理解 Vue CLI 的默认配置，并掌握一些常用的优化技巧。记住，代码优化就像减肥，没有一蹴而就，只有持之以恒！

感谢大家的参与，祝大家编程愉快！

发表回复 取消回复

发表回复取消回复