一、build:prod概述
build:prod是指在项目开发完成之后，将代码打包成最终可以上线的版本。一般而言，通过build:prod进行打包会减小代码大小、提高性能、优化体验以及保障安全等方面的目标。
在Vue项目中，我们可以通过执行npm run build:prod来进行打包，最终的打包文件会生成在/dist目录下。下面我们将从代码优化、性能提升、体验优化、安全保障等方面对build:prod进行详细阐述。
二、代码的优化
在代码的优化方面，主要从三个方面入手：文件压缩、代码分割和 Tree Shaking 。
1、文件压缩
// bable.config.js
module.exports = {
...
// 压缩JS代码
presets: [
['@babel/preset-env', {
useBuiltIns: false,
corejs: false,
modules: false,
targets: {
browsers: [
'> 1%',
'last 2 versions',
'not ie <= 8',
],
},
}],
],
// 压缩CSS代码
plugins: [
...
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
normalizeUnicode: false,
}],
},
canPrint: true,
}),
...
],
}以上的配置表明了在打包生产环境的文件时，需要对JS和CSS代码进行压缩。其中使用了@babel/preset-env和cssnano等第三方库进行压缩，同时可以选择移除注释、一些特殊字符等内容，从而减小文件大小。
2、代码分割
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
...
// 使用webpack的splitChunks进行代码分割
optimization: {
splitChunks: {
chunks: 'all',
name: 'vendor',
},
},
plugins: [
...
// 使用HtmlWebpackPlugin注入产生的vendor.js
new HtmlWebpackPlugin({
...
chunks: ['vendor', 'main'],
...
}),
...
],
...
};以上的配置表明了在打包生产环境的文件时，webpack会将代码拆分成多个文件，这些文件会被单独引入，从而减少页面加载时间。
3、Tree Shaking
// webpack.config.js
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
...
// 开启Tree Shaking，需要使用uglifyjs压缩JS代码
optimization: {
minimize: true,
minimizer: [new UglifyJSPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: false,
uglifyOptions: {
// 开启Tree Shaking
compress: {
unused: true,
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log'],
},
},
})],
},
...
};以上的配置表明了在打包生产环境的文件时，会进行Tree Shaking机制，去掉无用的代码。开启Tree Shaking需要使用uglifyjs插件。
三、性能的提升
在性能的提升方面，主要从两个方面入手：打包速度和页面加载速度。
1、打包速度
// vue.config.js
module.exports = {
...
// 开启parallel配置来提高打包速度
configureWebpack: {
...
plugins: [],
performance: {
hints: false,
},
},
parallel: require('os').cpus().length > 1,
...
};以上的配置表明了在打包生产环境的文件时，开启parallel配置可以提高打包速度。
2、页面加载速度
// vue.config.js
module.exports = {
...
// 对静态资源进行gzip压缩
configureWebpack: {
...
},
pluginOptions: {
compression: {
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false,
},
},
...
};以上的配置表明了在打包生产环境的文件时，对静态资源进行gzip压缩以减小文件大小，从而提高页面加载速度。
四、体验的优化
在体验的优化方面，主要从两个方面入手：打包文件的结果进行分析以及Web Workers。
1、打包文件的结果进行分析
module.exports = {
...
// 分析打包文件的结果
plugins: [
...
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
}),
...
],
...
};以上的配置表明了在打包生产环境的文件时，可以分析打包文件的结果，以便了解打包文件是否有冗余代码以及文件大小占比等信息，从而进行相应的优化。
2、Web Workers
// 异步处理用户数据
if (window.Worker) {
const worker = new Worker('./user.worker.js');
worker.onmessage = (event) => {
console.log(event.data);
};
worker.postMessage({
type: 'getText',
message: 'bundle',
});
} else {
// fallback
}以上的代码表明了使用Web Workers进行异步处理，可以在页面处理数据时提高响应速度，从而优化用户体验。
五、安全保障
在安全保障方面，主要从两个方面入手：CSRF攻击和XSS攻击。
1、CSRF攻击
// vue.config.js
module.exports = {
...
// 在webpack.config.js中使用CopyWebpackPlugin拷贝不经过处理的静态资源代码
// 在vue.config.js中使用compression-webpack-plugin压缩静态资源代码
configureWebpack: {
...
plugins: [
...
new CopyWebpackPlugin([{
from: path.resolve(__dirname, 'src/assets'),
to: path.resolve(__dirname, 'dist/assets'),
ignore: ['.*'],
}]),
...
],
},
pluginOptions: {
compression: {
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false,
},
},
...
};以上的配置表明了在打包生产环境的文件时，可以使用CopyWebpackPlugin拷贝不经过处理的静态资源代码，并使用compression-webpack-plugin压缩静态资源代码，从而避免被黑客在前端代码中注入恶意代码，防止CSRF攻击。
2、XSS攻击
// 引入DOMPurify库进行HTML过滤
import DOMPurify from 'dompurify';
...
this.$refs.content.innerHTML = DOMPurify.sanitize(this.html);以上的代码表明了在前端页面渲染HTML代码时，可以使用DOMPurify库进行HTML过滤，从而防止被黑客在前端代码中注入恶意代码，防止XSS攻击。
