各位观众老爷，晚上好！我是今晚的讲师，很高兴能跟大家聊聊 Vue CLI 在生产环境下如何利用 TerserPlugin 这把瑞士军刀，把代码压缩、混淆、外加来一波 Tree Shaking 的骚操作。
咱们开始吧！
第一部分：Vue CLI 与生产环境的那些事儿
首先，我们要明确一个概念：在开发阶段，我们追求的是快速迭代、方便调试。但到了生产环境，那就是另一回事了。我们要的是尽可能小的体积、尽可能快的加载速度，以及尽可能让竞争对手看不懂的“加密”代码。
Vue CLI 作为一个脚手架，已经帮我们做了很多配置，尤其是生产环境的优化。它默认使用 webpack 作为打包工具，而 TerserPlugin 就是 webpack 的一个插件，专门用来压缩和混淆 JavaScript 代码的。
第二部分：TerserPlugin 是个什么鬼？
TerserPlugin 本质上是一个基于 terser 的 webpack 插件。terser 呢，是 uglify-es 的一个分支，专门用来处理 ES6+ 语法的 JavaScript 代码。
简单来说，TerserPlugin 就是把你的 JavaScript 代码，通过各种算法，变成一堆看起来像乱码的东西，同时体积还变小了。
第三部分：Vue CLI 中 TerserPlugin 的配置
在 Vue CLI 项目中，TerserPlugin 的配置通常隐藏在 vue.config.js 文件中。如果你没有这个文件，可以在项目根目录下创建一个。
先来个简单的 vue.config.js 示例：
// vue.config.js
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 生产环境配置
config.optimization.minimizer = [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 移除 console.log
},
mangle: true, // 混淆变量名
},
}),
];
} else {
// 开发环境配置
}
},
};这段代码的意思是：只有在生产环境下，才会启用 TerserPlugin。然后，我们配置了 terserOptions，包括 compress 和 mangle 两个选项。
compress: 控制代码压缩的选项。mangle: 控制变量名混淆的选项。
第四部分：compress 选项详解：代码压缩的各种姿势
compress 选项里面有很多子选项，可以控制代码压缩的程度和方式。下面是一些常用的选项：
| 选项名称 | 作用 | 示例 |
|---|---|---|
drop_console |
移除 console.log、console.info 等语句。 |
drop_console: true |
drop_debugger |
移除 debugger 语句。 |
drop_debugger: true |
pure_funcs |
移除指定的纯函数调用。纯函数是指没有副作用的函数，例如 Math.floor。 |
pure_funcs: ['Math.floor'] |
dead_code |
移除无效代码。例如，永远不会执行的代码。 | dead_code: true |
unused |
移除未使用的变量和函数。 | unused: true |
evaluate |
尝试计算常量表达式。例如，1 + 2 会被替换成 3。 |
evaluate: true |
passes |
运行压缩器的次数。增加次数可以更彻底地压缩代码，但也会增加编译时间。 | passes: 2 |
keep_fnames |
保留函数名。 默认false，如果设为true，则会将函数名保留下来。在某些场景下，例如依赖函数名进行反射的库，可能需要保留函数名。 |
keep_fnames: false |
keep_classnames |
保留类名。 默认false，如果设为true，则会将类名保留下来。和keep_fnames类似，在某些需要使用类名进行反射的库中，可能需要保留类名。 |
keep_classnames: false |
keep_vars |
保留指定的变量。 默认false，如果设为true，则会将指定的变量保留下来，不进行混淆。通常用于保留全局变量或需要暴露给外部使用的变量。 |
keep_vars: ['myGlobalVariable'] |
ecma |
指定ECMAScript版本。默认为 5。 可以指定为 5, 6 (ES2015), 7 (ES2016), 8 (ES2017), 9 (ES2018), 10 (ES2019), 2020。这会影响到压缩器处理不同版本的JavaScript语法的能力。 |
ecma: 2020 |
举个例子，如果我们想移除 console.log 和 debugger 语句，可以这样配置：
// vue.config.js
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer = [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
mangle: true,
},
}),
];
} else {
// 开发环境配置
}
},
};第五部分：mangle 选项详解：让你的代码变成“火星文”
mangle 选项的作用是混淆变量名和函数名，让你的代码变得难以阅读。这可以增加代码的安全性，防止别人轻易破解你的代码。
mangle 选项也有一些子选项，可以控制混淆的方式。
| 选项名称 | 作用 | 示例 |
|---|---|---|
properties |
混淆属性名。 | properties: true |
reserved |
保留指定的变量名，不进行混淆。 | reserved: ['$', '_'] |
debug |
开启 debug 模式。可以查看哪些变量被混淆了。 | debug: true |
keep_fnames |
保留函数名。默认false，如果设为true，则会将函数名保留下来。在某些场景下，例如依赖函数名进行反射的库，可能需要保留函数名。 |
keep_fnames: false |
keep_classnames |
保留类名。默认false，如果设为true，则会将类名保留下来。和keep_fnames类似，在某些需要使用类名进行反射的库中，可能需要保留类名。 |
keep_classnames: false |
如果我们想混淆所有变量名，并且保留 $ 和 _ 变量名，可以这样配置：
// vue.config.js
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer = [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
mangle: {
reserved: ['$', '_'],
},
},
}),
];
} else {
// 开发环境配置
}
},
};第六部分：Tree Shaking：摇掉你代码中的“赘肉”
Tree Shaking 是一种移除 JavaScript 代码中未引用代码的技术。它可以有效减小代码体积，提高加载速度。
webpack 默认支持 Tree Shaking，但需要满足一些条件：
- 使用 ES Module 语法（
import和export）。 - 代码没有副作用（side effects）。
什么是副作用呢？简单来说，就是函数或模块除了返回值之外，还会修改外部状态。例如，修改全局变量、修改 DOM 等。
Vue CLI 已经默认配置好了 Tree Shaking，所以你不需要做额外的配置。只要你的代码符合上述条件，webpack 就会自动移除未引用的代码。
第七部分：实战演练：一个完整的 vue.config.js 示例
下面是一个更完整的 vue.config.js 示例，包含了代码压缩、混淆和 Tree Shaking 的配置：
// vue.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer = [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 移除 console.log
drop_debugger: true, // 移除 debugger
pure_funcs: ['console.log', 'console.warn'], // 移除指定的纯函数调用
},
mangle: {
reserved: ['$', '_'], // 保留 $ 和 _ 变量名
},
output: {
comments: false, // 移除注释
},
},
extractComments: false, // 不将注释提取到单独的文件中
}),
];
// 分割代码
config.optimization.splitChunks = {
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\/]node_modules[\/]/,
priority: -10,
chunks: 'initial',
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true,
},
},
};
// 开启 Gzip 压缩 (需要安装 compression-webpack-plugin)
// const CompressionWebpackPlugin = require('compression-webpack-plugin');
// config.plugins.push(
// new CompressionWebpackPlugin({
// filename: '[path][base].gz',
// algorithm: 'gzip',
// test: /.js$|.css$/,
// threshold: 10240,
// minRatio: 0.8,
// deleteOriginalAssets: false, // 是否删除原始资源
// })
// );
} else {
// 开发环境配置
}
},
productionSourceMap: false, // 生产环境禁用 source map
chainWebpack: (config) => {
// 移除 prefetch 插件
config.plugins.delete('prefetch');
// 移除 preload 插件
config.plugins.delete('preload');
// 压缩图片 (需要安装 image-webpack-loader)
// config.module
// .rule('images')
// .use('image-webpack-loader')
// .loader('image-webpack-loader')
// .options({
// mozjpeg: {
// progressive: true,
// quality: 65,
// },
// optipng: {
// enabled: false,
// },
// pngquant: {
// quality: [0.65, 0.90],
// speed: 4,
// },
// gifsicle: {
// interlaced: false,
// },
// webp: {
// quality: 75,
// },
// });
},
};这个示例还包含了一些其他的优化：
- 代码分割 (splitChunks): 将代码分割成多个 chunk，可以更好地利用浏览器缓存。
- Gzip 压缩 (CompressionWebpackPlugin): 对代码进行 Gzip 压缩，可以进一步减小代码体积。（需要安装
compression-webpack-plugin） - 禁用 source map (productionSourceMap): 在生产环境禁用 source map，可以防止别人轻易调试你的代码。
- 移除 prefetch 和 preload 插件: 预加载资源，初次加载时移除可以加快速度
- 压缩图片 (image-webpack-loader): 对图片进行压缩，可以减小图片体积。（需要安装
image-webpack-loader）
第八部分：注意事项
- 过度优化可能会适得其反: 不要为了追求极致的压缩率而过度优化代码。过度优化可能会导致代码可读性降低，调试困难。
- 测试是关键: 在生产环境部署之前，一定要进行充分的测试，确保代码运行正常。
- 关注编译时间: 代码压缩和混淆会增加编译时间。如果编译时间过长，可以考虑调整配置，平衡压缩率和编译时间。
- 兼容性: 注意
TerserPlugin的兼容性。不同的TerserPlugin版本可能对不同的 JavaScript 语法有不同的支持。
第九部分：总结
TerserPlugin 是 Vue CLI 在生产环境下进行代码优化的利器。通过合理配置 TerserPlugin，我们可以有效地压缩代码、混淆变量名，并且利用 Tree Shaking 移除未引用的代码。
当然，代码优化是一个持续的过程。我们需要不断学习新的技术，并且根据实际情况调整配置，才能达到最佳的优化效果。
好了，今天的讲座就到这里。希望对大家有所帮助！如果大家有什么问题，可以随时提问。